Question

单击“全选”复选框后，我想选中所有复选框。这里是代码

<div class="fp">
  <div class="fpanel">
    <div class="fpblockscontainer"> 
      <span class="fpblockslabel">Merchants</span>    
      <div class="fpblocks">
        <label class="checkbox">
          <input class=".select-all2" type="checkbox">Select All</label>
        <label class="checkbox">
          <input type="checkbox">Apple</label>
        <label class="checkbox">
          <input type="checkbox">orange</label>
        <label class="checkbox">
          <input type="checkbox">potato</label>
        <label class="checkbox">
          <input type="checkbox">Williams-Sonoma</label>

      </div>
    </div>

一旦选中“select.all2”复选框，我需要选中所有复选框。下面的jquery代码不起作用。我哪里错了？

$(".select-all2").on("click", function () {
  if ($(this).is(':checked')) {
    $(this).closest("div.fp").find(':checkbox').each(function () {
      $(this).attr('checked', 'checked');
    });
  } else {
    $(this).closest("div.fp").find(':checkbox').each(function () {
      $(this).removeAttr('checked');
    });
  }
});

Answer 1

只需从输入中删除点，它就可以正常工作

<input class=".select-all2" type="checkbox" >

到

<input class="select-all2" type="checkbox" >

见这里：jsFiddle Demo

Answer 2

从班级

中删除.

 <input class="select-all2" type="checkbox" >
       //------^----here

使用prop（）而不是attr（）

 $(this).prop('checked', true); //to check the checkbox

 $(this).prop('checked', false); //to uncheck the checkbox

并且您不需要每个（）循环

试试这个

 $(".select-all2").on("click", function() {
    if ($(this).is(':checked')) {
        $(this).closest("div.fpblocks").find(":checkbox").prop('checked',true);

    } else {
       $(this).closest("div.fpblocks").find(":checkbox").prop('checked',false);
    }
});

fiddle here

Answer 3

不会触发点击，因为标记在类名中包含.。

<input class=".select-all2" type="checkbox" >

应该是：

<input class="select-all2" type="checkbox" >

脚本也可以更简洁：

$(".select-all2").click(function(){
    $("input[type='checkbox']").prop("checked", $(this).is(":checked"));
});

工作示例 http://jsfiddle.net/uY8yu/

Answer 4

尝试选择/取消选择。当选中/取消选中单个复选框时，这将更改select-all2的状态。

var $ch = $(".select-all2").change(function() {
    $all.prop('checked', $ch.filter(':checked').length == $ch.length);
}),
$all = $('.checkbox input[type=checkbox]').click(function () {
  $ch.prop('checked', this.checked);
});

请参阅demo

使用jquery选择div中的所有复选框

4 个答案: