1

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

<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');
    });
  }
});
4

4 回答 4

5

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

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

至

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

见这里：jsFiddle 演示

于 2013-05-07T09:30:24.690 回答
4

.从班级中删除

 <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

你不需要 each() 循环

尝试这个

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

在这里摆弄

于 2013-05-07T09:29:50.830 回答
4

未触发单击，因为标记包含.类名中的 。

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

于 2013-05-07T09:30:05.257 回答
0

试试这个选择/取消选择。这也将改变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);
});

看演示

于 2013-05-07T09:29:59.780 回答