Tạo chức năng checkall với checkbox và radio trong Jquery

Với đa số các bạn lập trình web newbie, có lẽ đôi khi các bạn cần thực hiện một chức năng đồng loạt trên nhiều dòng với việc xác định dòng bangwd checkbox hay radiobox. Dưới đây tôi chia sẽ cách thực hiện, hi vọng có thể giúp được các bạn.



1. Check box
<script language="javascript">
        function selectAll(wrapperAll, wrapperInputs) {

            var selectAll = wrapperAll.find('input');
            var allInputs = wrapperInputs.find('input');

            console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length);

            function checkitems(allInputs) {
                //If all items checked
                if (allInputs.filter(':not(:checked)').length === 0) {

                    console.log('Function: checkItems: All items checked');

                    selectAll.attr('checked', true);

                } else {
                    console.log('Function: checkItems: Else all items checked');
                    selectAll.attr('checked', false);
                }
            }

            checkitems(allInputs);
            allInputs.on('change', function() {
                checkitems(allInputs)
            });

            selectAll.on('change', function() {
                if (this.checked) {
                    console.log('This checkbox is checked');
                    wrapperInputs.find(':checkbox').attr('checked', true);

                } else {
                    console.log('This checkbox is NOT checked');
                    wrapperInputs.find(':checkbox').attr('checked', false);

                }
            });

        }

        $(function() {

            var wrapperAll = $('.selectallinput');
            var wrapperInputs = $('.inputs');

            selectAll(wrapperAll, wrapperInputs);
        });

    </script>

<div class="selectallinput">
        <label for="select-all">Select All</label>
        <input type="checkbox" id="select-all">
    </div>
    <br>
    <br>
    <div class="inputs">
        <br>
        <label for="select-1">Select 1</label>
        <input type="checkbox" id="select-1" checked>
        <br>
        <label for="select-2">Select 2</label>
        <input type="checkbox" id="select-2" checked>
        <br>
        <label for="select-3">Select 3</label>
        <input type="checkbox" id="select-3" checked>
        <br>
        <label for="select-4">Select 4</label>
        <input type="checkbox" id="select-4" checked>
        <br>
        <label for="select-5">Select 5</label>
        <input type="checkbox" id="select-5" checked>

    </div>

2. Radio
<script language="javascript">
        function checkAll(val) {
            var radioBtns = document.getElementsByTagName('INPUT');

            for (i = 0; i < radioBtns.length; i++) {
                if ((radioBtns[i].type == "radio") && (radioBtns[i].value == val)) {
                    radioBtns[i].checked = true;
                }
            }
        }
</script>

<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0"> 
    <TR><TD>Yes<BR>

            <INPUT TYPE="radio" NAME="rball" VALUE="yesall" onClick="checkAll('YES');">

            <BR></TD>
        <TD WIDTH="6%">No<BR>

            <INPUT TYPE="radio" NAME="rball" VALUE="noall" onClick="checkAll('NO');">

            <BR></TD></TR> 
    <TR><TD><INPUT TYPE="radio" ID="rbrow1Y" NAME="rb1" VALUE="YES" ></TD>
        <TD><INPUT TYPE="radio" ID="rbrow1N" NAME="rb1" VALUE="NO"></TD></TR> 
    <TR><TD><INPUT TYPE="radio" ID="rbrow2Y" NAME="rb2" VALUE="YES" ></TD>
        <TD><INPUT TYPE="radio" ID="rbrow2N" NAME="rb2" VALUE="NO"></TD></TR> 

</TABLE>

Chúc các bạn thành công.