chia sẻ:

Sử dụng Jquery cho việc Check/Uncheck input checkbox with all children, parent elements

19/02/2011 02:00 | Thủ thuật - Tips

Đoạn code sau sẽ giúp bạn thực hiện việc check/Uncheck các phần tử là cha, con trong một dãy tree các input checkbox.

Link Demo

================================================================
<script type="text/javascript">
    $(document).ready(function(){
        $('.chk').click(function(){
            if ($(this).is(':checked')) {
                $(this).parent().find('input:checkbox').attr('checked', true);
            }
            else{
                $(this).parent().find('input:checkbox').attr('checked', false);
            }
            updateCheck();
        });
    });
    function updateCheck(){
        $('input.chk').change(function() {
            if ($(this).is(':checked')) {
                $(this).closest('ul').siblings('input:checkbox').attr('checked', true).closest('ul').siblings('input:checkbox').attr('checked', true);
            }
        });
    }
</script>
================================================================
<ul>
    <li>
        <input type="checkbox" value="1" name="chk-1" id="chk-1-0"> 
        <label for="chk-1-0">Categories in English Page</label>
        <ul>
        <li>
            <input type="checkbox" value="3" name="chk-3" checked="checked" id="chk-3-1"> 
            <label for="chk-3-1">Sightseeing Tours</label>
            <ul>
                <li>
                    <input type="checkbox" value="8" name="chk-8" checked="checked" id="chk-8-3"> 
                    <label for="chk-8-3">London Coach Tours</label>
                </li>
                <li>
                    <input type="checkbox" value="9" name="chk-9" checked="checked" id="chk-9-3"> 
                    <label for="chk-9-3">Out of London Coach Tours</label>
                </li>
                <li>
                    <input type="checkbox" value="10" name="chk-10" checked="checked" id="chk-10-3"> 
                    <label for="chk-10-3">Walking and Bike Tours</label>
                </li>
                <li>
                    <input type="checkbox" value="11" name="chk-11" checked="checked" id="chk-11-3"> 
                    <label for="chk-11-3">Black Taxi Tours</label>
                </li>
                <li>
                    <input type="checkbox" value="12" name="chk-12" checked="checked" id="chk-12-3"> 
                    <label for="chk-12-3">Evening Tours</label>
                </li>
                <li>
                    <input type="checkbox" value="13" name="chk-13" checked="checked" id="chk-13-3"> 
                    <label for="chk-13-3">Celebrity Tours</label>
                </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" value="4" name="chk-4" id="chk-4-1"> 
            <label for="chk-4-1">Low Cost Tours</label>
        </li>
        <li>
            <input type="checkbox" value="5" name="chk-5" id="chk-5-1"> 
            <label for="chk-5-1">Eurostar Trips</label>
        </li>
        <li>
            <input type="checkbox" value="6" name="chk-6" id="chk-6-1"> 
            <label for="chk-6-1">Attraction Tickets</label>
        </li>
        <li>
            <input type="checkbox" value="7" name="chk-7" id="chk-7-1"> 
            <label for="chk-7-1">Dining &amp; Entertainment</label>
        </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" value="2" name="chk-2" id="chk-2-0"> 
        <label for="chk-2-0">Categories in Vietnamese Page</label>
        <ul>
            <li>
                <input type="checkbox" value="15" name="chk-15" id="chk-15-2"> 
                <label for="chk-15-2">Tour tham quan</label>
            </li>
            <li>
                <input type="checkbox" value="16" name="chk-16" id="chk-16-2"> 
                <label for="chk-16-2">Tour giá rẻ</label>
            </li>
        </ul>
    </li>
</ul>

Link Demo