CODEWITHSUNDEEP
jquerycheckboxhtml-table
victorio
victorio

Reputation: 6646

how to check and uncheck all checkboxes in an html table with checking/unchecking one check box?

I have a table, with rows, every row has a check box, and there is a main check box at the thead. My code:

<table border="1">
    <thead>
        <tr>
            <th><input type="checkbox" id="allcb" name="allcb"/></th>
            <th>values</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="cb1" name="cb1"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb2" name="cb2"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb3" name="cb3"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>

(also try it here)

Could anyone help me, how to do that if I check the main check box at the top, all check boxes will be checked, if I uncheck the main, all checkboxes will be unchecked. Thank you if you help me!

Upvotes: 8

Views: 40202

Answers (3)

theSlyest
theSlyest

Reputation: 459

I made a little modification on your HTML code by changing the names of the checkboxes in the table body from cbn to cb[] (better for server operations). I also took in account the fact that the main checkbox state can be changed by clicking on another checkbox: if the user manually selects all the other checkboxes, then the main checkbox should reflect it; also, if the user unchecks a row after clicking the main checkbox to check all the others, then the main checkbox should get unchecked.

You can see it working there : https://jsfiddle.net/h6tgj02p/

<table border="1">
    <thead>
        <tr>
            <th><input type="checkbox" id="allcb" name="allcb"/></th>
            <th>values</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="cb1" name="cb[]"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb2" name="cb[]"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb3" name="cb[]"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>

<script  type="text/javascript">
$(document).ready(function() {

    /*
    * Click on select all checkbox
    */
    $('#allcb').click(function(e) {
        $('[name="cb[]"]').prop('checked', this.checked);
    });

    /*
    * Click on another checkbox can affect the select all checkbox
    */
    $('[name="cb[]"]').click(function(e) {
        if ($('[name="cb[]"]:checked').length == $('[name="cb[]"]').length || !this.checked)
            $('#allcb').prop('checked', this.checked);
    });

});

</script>

Upvotes: 2

Prashanth Thurairatnam
Prashanth Thurairatnam

Reputation: 4361

$(function(){
       $("#allcb").click(function() {
       var chkBoxes = $("input[id^=cb]");
       chkBoxes.prop("checked", !chkBoxes.prop("checked"));
   }); 
});

http://jsfiddle.net/7f7Kz/2/

Upvotes: 3

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Working Demo http://jsfiddle.net/xYAfj/2/

$('#allcb').change(function(){
    if($(this).prop('checked')){
        $('tbody tr td input[type="checkbox"]').each(function(){
            $(this).prop('checked', true);
        });
    }else{
        $('tbody tr td input[type="checkbox"]').each(function(){
            $(this).prop('checked', false);
        });
    }
});

Shorter Code

Working Demo http://jsfiddle.net/cse_tushar/4tss8/

$('#allcb').change(function () {
    $('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

Upvotes: 18

Related Questions