javascript - Select All checkboxes using jQuery - Stack Overflow

admin管理员组

文章数量:1135632

I have the following html code:

    <input type="checkbox" id="ckbCheckAll" />
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

When user checks ckbCheckAll all checkboxes must be checked. Also I have following jquery code:

    $(document).ready(function () {
        $("#ckbCheckAll").click(function () {
            $(".checkBoxClass").attr('checked', this.checked);
        });
    });

When I see my page in the browser I get the following result: In the first click on ckbCheckAll all checkboxes were checked (which is correct). In the second click on ckbCheckAll all checkboxes were unchecked (which is correct). But in 3rd attempt nothing happened! also in 4th attempt nothing happened and so on.

Where is the problem?

I have the following html code:

    <input type="checkbox" id="ckbCheckAll" />
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

When user checks ckbCheckAll all checkboxes must be checked. Also I have following jquery code:

    $(document).ready(function () {
        $("#ckbCheckAll").click(function () {
            $(".checkBoxClass").attr('checked', this.checked);
        });
    });

When I see my page in the browser I get the following result: In the first click on ckbCheckAll all checkboxes were checked (which is correct). In the second click on ckbCheckAll all checkboxes were unchecked (which is correct). But in 3rd attempt nothing happened! also in 4th attempt nothing happened and so on.

Where is the problem?

• javascript
• jquery

Share Improve this question Follow edited Jan 10, 2018 at 16:35 kenorb 166k9494 gold badges707707 silver badges775775 bronze badges asked Feb 8, 2013 at 17:47 Seyed Morteza MousaviSeyed Morteza Mousavi 6,94399 gold badges4646 silver badges7070 bronze badges 1

• Possible duplicate of Select all checkboxes with jQuery – Stewart Commented Apr 1, 2017 at 15:20

Add a comment  | 

16 Answers 16

Sorted by: Reset to default 127

Use prop

$(".checkBoxClass").prop('checked', true);

or to uncheck:

$(".checkBoxClass").prop('checked', false);

http://jsfiddle.net/sVQwA/

$("#ckbCheckAll").click(function () {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
});

Updated JSFiddle Link: http://jsfiddle.net/sVQwA/1/

Here is a simple way to do this :

Html :

<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>

jquery :

$(document).ready(function(){
$("#selectall").click(function(){
        if(this.checked){
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', true);
            })
        }else{
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', false);
            })
        }
    });
});

Use below code..

        $('#globalCheckbox').click(function(){
            if($(this).prop("checked")) {
                $(".checkBox").prop("checked", true);
            } else {
                $(".checkBox").prop("checked", false);
            }                
        });


        $('.checkBox').click(function(){
            if($(".checkBox").length == $(".checkBox:checked").length) { 
                 //if the length is same then untick 
                $("#globalCheckbox").prop("checked", false);
            }else {
                //vise versa
                $("#globalCheckbox").prop("checked", true);            
            }
        });

Try the following simple code:

$('input[type=checkbox]').each(function() { this.checked = true; }); 

Source: How to reset all checkboxes using jQuery or pure JS?

use this

if (this.checked)
   $(".checkBoxClass").attr('checked', "checked");
else
   $(".checkBoxClass").removeAttr('checked');

also you can use prop please check http://api.jquery.com/prop/

I have seen many answers to this question and found some answer is lengthy and some answer is a little bit wrong. I have created my own code by using the above IDs and class.

$('#ckbCheckAll').click(function(){
        if($(this).prop("checked")) {
            $(".checkBoxClass").prop("checked", true);
        } else {
            $(".checkBoxClass").prop("checked", false);
        }                
    });


    $('.checkBoxClass').click(function(){
        if($(".checkBoxClass").length == $(".checkBoxClass:checked").length) { 
            $("#ckbCheckAll").prop("checked", true);
        }else {
            $("#ckbCheckAll").prop("checked", false);            
        }
    });

In the above code, where user clicks on select all checkbox and all checkbox will be selected and vice versa and second code will work when the user selects checkbox one by one then select all checkbox will be checked or unchecked according to a number of checkboxes checked.

$(document).ready(function() {
    $('#ckbCheckAll').click(function() {
        $('.checkBoxClass').each(function() {
            $(this).attr('checked',!$(this).attr('checked'));
        });
    });
});

OR

$(function () {
    $('#ckbCheckAll').toggle(
        function() {
            $('.checkBoxClass').prop('checked', true);
        },
        function() {
            $('.checkBoxClass').prop('checked', false);
        }
    );
});

Try this

$(document).ready(function () {
    $("#ckbCheckAll").click(function () {
        $("#checkBoxes input").prop('checked', $(this).prop('checked'));
    });
});

That should do it :)

$(document).ready(function(){
$('#ckbCheckAll').click(function(event) { 
            if($(this).is(":checked")) {
                $('.checkBoxClass').each(function(){
                    $(this).prop("checked",true);
                });
            }
            else{
                $('.checkBoxClass').each(function(){
                    $(this).prop("checked",false);
                });
            }   
    }); 
    });

Use prop() instead -

$(document).ready(function () {
        $("#ckbCheckAll").click(function () {
            $(".checkBoxClass").each(function(){
                if($(this).prop("checked", true)) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }                
            });
        });
    });

BUT I like @dmk's much more compact answer and +1'd it

$(document).ready(function () {
    $(".class").on('click', function () {
        $(".checkbox).prop('checked', true);
    });
});

Let i have the following checkboxes

 <input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br>
        <input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br>
        <input type="checkbox" name="vehicle" value="Car" id="chk_car">car 
        <input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br>
        <input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty 

Here is the simple code to select all and diselect all when the selectall check box will click

<script type="text/javascript">
        $(document).ready(function () {
            $("#chk_selall").on("click", function () {

                $("#chk_byk").prop("checked", true); 
                $("#chk_car").prop("checked", true); 
                $("#chk_bus").prop("checked", true); 
                $("#chk_scooty").prop("checked", true); 


            })

            $("#chk_selall").on("click", function () {

                if (!$(this).prop("checked"))
                {
                    $("#chk_byk").prop("checked", false);
                    $("#chk_car").prop("checked", false);
                    $("#chk_bus").prop("checked", false);
                    $("#chk_scooty").prop("checked", false);             

                }
            });


        });
    </script>

checkall is the id of allcheck box and cb-child is the name of each checkboxes that will be checked and unchecked depend on checkall click event

$("#checkall").click(function () {
                        if(this.checked){
                            $("input[name='cb-child']").each(function (i, el) {
                                el.setAttribute("checked", "checked");
                                el.checked = true;
                                el.parentElement.className = "checked";

                            });
                        }else{
                            $("input[name='cb-child']").each(function (i, el) {
                                el.removeAttribute("checked");
                                el.parentElement.className = "";
                            });
                        }
                    });

 jQuery( function($){
    // add multiple select / deselect functionality
    $("#contact_select_all").click(function () {

        if($("#contact_select_all").is(":checked")){
            $('.noborder').prop('checked',true);
        }else
            $('.noborder').prop('checked',false);
    });

    // if all checkbox are selected, check the selectall checkbox
    $(".noborder").click(function(){

    if($(".noborder").length == $(".noborder:checked").length) {
        $("#contact_select_all").attr("checked", "checked");
    } else {
        $("#contact_select_all").removeAttr("checked");
    }

    });

});

I know its too late, but I'm posting this for the upcoming developers.

For select all checkbox we need to check three conditions, 1. on click select all checkbox every checkbox should get selected 2. if all selected then on click select all checkbox, every checkbox should get deselected 3. if we deselect or select any of the checkbox the select all checkbox also should change.

with these three things we'll get a good result.for this you can approach this link https://qawall.in/2020/05/30/select-all-or-deselect-all-checkbox-using-jquery/ I got my solution from here, they have provided solution with examples.

<table>
<tr>
    <th><input type="checkbox" id="select_all"/> Select all</th>
</tr>
<tr>
    <td><input type="checkbox" class="check" value="1"/> Check 1</td>
    <td><input type="checkbox" class="check" value="2"/> Check 2</td>
    <td><input type="checkbox" class="check" value="3"/> Check 3</td>
    <td><input type="checkbox" class="check" value="4"/> Check 4</td>
    <td><input type="checkbox" class="check" value="5"/> Check 5</td>
</tr>

<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
    if(this.checked){
        $('.check').each(function(){
            this.checked = true;
        });
    }else{
         $('.check').each(function(){
            this.checked = false;
        });
    }
});

$('.check').on('click',function(){
    if($('.check:checked').length == $('.check').length){
        $('#select_all').prop('checked',true);
    }else{
        $('#select_all').prop('checked',false);
    }
});

});

hope this will help anyone ...:)

Add jquery-2.1.0.min.js file

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>

Write the codes given below:

<script>
$(document).ready(function () {   
    $("#checkAll").change(function() {
        var checked = $(this).is(':checked'); // Get Checkbox state
        if (this.checked) //If true then checked all checkboxes
           $(".classofyourallcheckbox").prop('checked', true);
        else
           $(".classofyourallcheckbox").prop('checked', false); //or uncheck all textboxes 
    }); 
});
</script>

本文标签： javascriptSelect All checkboxes using jQueryStack Overflow