使用 jQuery 选择所有复选框答案

【问题标题】：Select All checkboxes using jQuery使用 jQuery 选择所有复选框
【发布时间】：2013-01-24 13:27:44
【问题描述】：

我有以下html代码：

    <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>

当用户选中ckbCheckAll 时，必须选中所有复选框。我也有以下 jquery 代码：

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

当我在浏览器中看到我的页面时，我得到以下结果：在第一次点击ckbCheckAll 时，所有复选框都被选中（这是正确的）。在第二次点击ckbCheckAll 时，所有复选框都未选中（这是正确的）。但是在第三次尝试中什么也没发生！同样在第 4 次尝试中什么也没发生，依此类推。

问题出在哪里？

【问题讨论】：

Select all checkboxes with jQuery的可能重复

标签： javascript jquery

【解决方案1】：

使用道具

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

或取消选中：

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

http://jsfiddle.net/sVQwA/

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

更新 JSFiddle 链接：http://jsfiddle.net/sVQwA/1/

【讨论】：

您没有检查是否首先检查了 .checkBoxClass。
@JayBlanchard，那又怎样？它们都需要检查，无论是否检查。
他正在寻找其他行为 - 如果未选中则选中，如果选中则取消选中。
我喜欢你的风格@dmk。真的很感动。 +1。
仅供参考：如果您取消选中子复选框，则更新小提琴以取消选中所有复选框。 jsfiddle.net/sVQwA/1

【解决方案2】：

这是一个简单的方法：

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);
            })
        }
    });
});

【讨论】：

更新了代码，使其适用于最新的 jquery

【解决方案3】：

使用下面的代码..

        $('#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);            
            }
        });

【讨论】：

【解决方案4】：

试试下面的简单代码：

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

来源：How to reset all checkboxes using jQuery or pure JS?

【讨论】：

【解决方案5】：

使用这个

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

您也可以使用prop，请查看http://api.jquery.com/prop/

【讨论】：

prop() 应该用于此。
刚刚添加了道具，但是道具在以后的版本中添加了jquery，因此我不喜欢它，但它当然是个人选择...
-1 因为prop 是要走的路，而不仅仅是“一些替代品”。
@JayBlanchard：您的解释非常错误。它是属性（x.setAttribute('foo', ..)、x.getAttribute('foo')）与属性（x.foo）。 value 是一个字符串，但应始终作为 property 处理。
@JayBlanchard 谢谢。我只是用“prop”替换了“attr”。效果很好！

【解决方案6】：

我看过很多关于这个问题的答案，发现有些答案很长，有些答案有点错误。我使用上述 ID 和类创建了自己的代码。

$('#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);            
        }
    });

在上面的代码中，用户点击全选复选框，所有复选框都将被选中，反之亦然，当用户一个接一个地选中复选框时，第二个代码将起作用，然后选中所有复选框将根据一个数字被选中或取消选中选中的复选框数。

【讨论】：

【解决方案7】：

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

或

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

【讨论】：

【解决方案8】：

试试这个

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

应该这样做:)

【讨论】：

【解决方案9】：

$(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);
                });
            }   
    }); 
    });

【讨论】：

欢迎来到 StackOverflow！谢谢您的回答。发布仅包含的答案通常没有应有的帮助。考虑解释这段代码如何解决问题

【解决方案10】：

使用 prop() 代替 -

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

但我喜欢 @dmk 更简洁的答案，并为它 +1

【讨论】：

【解决方案11】：

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

【讨论】：

欢迎来到堆栈溢出 :-) 请看How to Answer。您应该提供一些信息为什么您的代码可以解决问题。仅代码答案对社区没有用处。

【解决方案12】：

让我有以下复选框

 <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

这是当全选复选框单击时全选和取消全选的简单代码

<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>

【讨论】：

【解决方案13】：

checkall 是所有复选框的 id，cb-child 是每个复选框的名称，将根据 checkall 点击事件进行选中和取消选中

$("#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 = "";
                            });
                        }
                    });

【讨论】：

【解决方案14】：

 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");
    }

    });

});

【讨论】：

【解决方案15】：

我知道为时已晚，但我正在为即将到来的开发人员发布此消息。

对于全选复选框，我们需要检查三个条件， 1.点击选中所有复选框，每个复选框都应该被选中 2.如果全部选中然后点击全选复选框，每个复选框都应该被取消选中 3. 如果我们取消选择或选择任何复选框，则全选复选框也应该更改。

通过这三件事，我们会得到一个很好的结果。为此，您可以访问此链接https://qawall.in/2020/05/30/select-all-or-deselect-all-checkbox-using-jquery/ 我从这里得到了我的解决方案，他们提供了带有示例的解决方案。

<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);
    }
});

});

希望这对任何人都有帮助...:)

【讨论】：

【解决方案16】：

添加 jquery-2.1.0.min.js 文件

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

写出下面给出的代码：

<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>

【讨论】：