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>

我试图让它发挥作用，但我失败了......任何帮助？

JsFiddle Here

Answer 1

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

试试这个

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

<强> JS

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

fiddle here

使用a链接

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

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

Answer 2

检查 -

$("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 3

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

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

DEMO

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

jquery version 1.6 +使用prop

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

jquery version 1.6 -使用attr

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

或

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

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

6 个答案: