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

I want to select all the checkboxes once the "select all" checkbox is clicked. Here`s is the code

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

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

Here I need to select all the checkbox once the "select.all2" checkbox is selected. The below jquery code is not working. Where am I wrong?

在选中“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');
    });
  }
});

4 个解决方案

#1

just remove dot from your input, and it should work fine

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

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

至

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

See here: jsFiddle Demo

看到这里：jsFiddle演示

#2

remove . from class

去掉。来自课堂

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

use prop() instead of attr()

使用prop（）而不是attr（）

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

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

and you don't need each() loop

而且你不需要每个（）循环

try this

尝试这个

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

在这里小提琴

#3

The click isn't fired because the markup includes the . in the classname.

由于标记包含，因此不会触发单击。在classname中。

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

should be:

应该：

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

The script can also be made more concise:

脚本也可以更简洁：

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

Working Example http://jsfiddle.net/uY8yu/

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

#4

try this for select/deselect. This will change state of select-all2 when individual checkboxes are checked/unchecked also.

尝试选择/取消选择。当选中/取消选中单个复选框时，这将改变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);
});

see demo

看看演示

#1