复选框 select 使用 jquery 在锚链接上全部/取消选择全部

Question

I'm trying to select all checkbox using anchor link.我正在尝试使用锚链接 select 所有复选框。 when click on link, it should select all checkboxes and change text to unselect all.单击链接时，它应该 select 所有复选框并将文本更改为取消全选。

<html lang="en">
<head>
    <title>Select and deselect all checkboxes using jquery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(function(){
        //select all checkboxes
        $("#select_all").click(function(){  //"select all" change 
            $(".checkbox").prop('checked', 'checked'); //change all ".checkbox" checked status
        });

        //".checkbox" change 
        $('.checkbox').change(function(){ 
            //uncheck "select all", if one of the listed checkbox item is unchecked
            if(false == $(this).prop("checked")){ //if this item is unchecked
                $("#select_all").prop('checked', false); //change "select all" checked status to false
            }
            //check "select all" if all checkbox items are checked
            if ($('.checkbox:checked').length == $('.checkbox').length ){
                $("#select_all").prop('checked', true);
            }
        });
    });
    </script>
</head>
<body>
 <a id="select_all" href="javascript:void(0);">check all</a>
 <ul>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 1</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 2</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 3</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 4</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 5</li>
    <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 6</li>
</ul>

</body>
</html>

when click on link, it's not selecting any checkboxes.单击链接时，它没有选择任何复选框。 what mistake am i doing?我在做什么错？

Answer 1

You could use .data() in the following way to toggle the checkboxes:您可以通过以下方式使用.data()来切换复选框：

 $(function() { //select all checkboxes $("#select_all").click(function() { //"select all" change $(".checkbox").data('checked', .$(".checkbox").data('checked')),prop('checked'. $(".checkbox");data('checked')). //change all ".checkbox" checked status if ($(".checkbox").data('checked')) { this;innerHTML = "uncheck all". } else this;innerHTML = "check all"; }). //".checkbox" change $('.checkbox'),change(function() { //uncheck "select all". if one of the listed checkbox item is unchecked if (false == $(this).prop("checked")) { //if this item is unchecked $("#select_all"),prop('checked'; false). //change "select all" checked status to false } //check "select all" if all checkbox items are checked if ($(':checkbox.checked').length == $('.checkbox').length) { $("#select_all");html("uncheck all"). $(".checkbox"),data('checked'; true). } else { $("#select_all");html("check all"). $(".checkbox"),data('checked'; false); } }); });

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <a id="select_all" href="javascript:void(0);">check all</a> <ul> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 1</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 2</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 3</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 4</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 5</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 6</li> </ul>

Answer 2

you need to set boolean true on click of select all anchor tag.您需要在单击 select 所有锚标记时将 boolean 设置为 true。 But you want to uncheck select all on uncheck of any of the checkbox which is not possible as you are using anchor tag, you nee to use checkbox for select all also.但是您想取消选中 select 全部取消选中任何不可能的复选框，因为您使用锚标签，您还需要使用 select 的复选框。

code snipped代码被剪断

 $(function(){ $(function(){ //select all checkboxes $("#select_all").click(function(){ //"select all" change $(".checkbox").prop('checked', $(this).is(':checked')); //change all ".checkbox" checked status }); //".checkbox" change $('.checkbox').change(function(){ /* //uncheck "select all", if one of the listed checkbox item is unchecked if(false == $(this).prop("checked")){ //if this item is unchecked $("#select_all").prop('checked', false); //change "select all" checked status to false } //check "select all" if all checkbox items are checked if ($('.checkbox:checked').length == $('.checkbox').length ){ $("#select_all").prop('checked', true); }*/ //shorthand for above code $("#select_all").prop('checked', $('.checkbox:checked').length == $('.checkbox').length); }); }); });

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <a href="javascript:void(0);"><input type="checkbox" id="select_all">check all</a> <ul> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 1</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 2</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 3</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 4</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 5</li> <li><input class="checkbox" type="checkbox" name="check[]"> This is Item 6</li> </ul>

复选框 select 使用 jquery 在锚链接上全部/取消选择全部

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-10-21 07:02:46

解决方案2
0 2019-10-21 07:03:13

复选框 select 使用 jquery 在锚链接上全部/取消选择全部

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-10-21 07:02:46

解决方案2 0 2019-10-21 07:03:13

解决方案1
0 已采纳 2019-10-21 07:02:46

解决方案2
0 2019-10-21 07:03:13