javascript - 如何使用jquery检查/取消选中所有复选框

Question

我有这个 HTML 代码

<div class="friends_container">
   <div class="friend">
       <input type="checkbox" />    
      ...
   </div>
<div class="friend">
       <input type="checkbox" />    
      ...
   </div>
<div class="friend">
       <input type="checkbox" />    
      ...
   </div>
</div>

全选/取消全选链接

<a id="selectall" href="#" >select all</a>

我试图让它工作，但我失败了..有什么帮助吗？

提琴手Here

Answer 1

将链接更改为复选框，这将很容易

尝试这个

<input id="selectall" type="checkbox"  />select all

js

 $('#selectall').click(function(){
    $('.friend').find('input:checkbox').prop('checked',this.checked);
})

在这里摆弄

---

带a链接

$('#selectall').click(function(){
    $('.friend').find('input:checkbox').prop('checked',true);
})

再创建一个链接以取消选中该复选框

Answer 2

.prop()为此，您可以使用 jQuery方法。

$(function() {
    var $checkboxes = $('.friends_container>.friend>input:checkbox');
    $('#selectall').on('click', function(e) {
        e.preventDefault();
        $(this).toggleClass('selected');
        $checkboxes.prop('checked', function() {
            return !this.checked;
        });
    });
});

演示

Answer 3

去检查 -

$("input[type='checkbox']").prop('checked', true);

取消选中 -

$("input[type='checkbox']").prop('checked', false);

使用锚点进行操作 -

$("#selectall").click(function(){
   $("input[type='checkbox']").prop('checked', true);
});

而且，如果您有一些取消选择的锚点-

<a id="deselectall" href="#" >deselect all</a>

您可以向其添加取消选择所有侦听器 -

$("#deselectall").click(function(){
   $("input[type='checkbox']").prop('checked', false);
});

Answer 4

//checkall
$('#selectall').on('click', function (e) {
    $('input[type="checkbox"]').prop('checked', true);
    e.preventDefault();
});
//uncheck all
$('#unselectall').on('click', function (e) {
    $('input[type="checkbox"]').prop('checked', false);
    e.preventDefault();
});

Answer 5

$('#selectall').click(function(e){
  e.preventDefault();
  $('input[type="checkbox"]').prop('checked',this.checked);
});

Answer 6

jQueryversion 1.6 +使用prop

$("#input[type='checked']").prop('checked',true);

jQueryversion 1.6 -使用attr

$("#input[type='checked']").attr('checked','checked');

或者

$("#input[type='checked']").attr('checked',true);