0

难以置信 - 我的同事给我发了这个脚本 - 我确信我忽略了一些简单的事情

http://jsfiddle.net/mplungjan/j4m62/

出于某种原因，我无法弄清楚，无论我点击哪个复选框，都会检查所有三个复选框 - 我希望在点击前两个中的任何一个时只检查前两个，然后自行检查第三个

HTML：

<input class="check-all" name="checkbox[]"  id="checkbox1" type="checkbox" value="on"/><label for="checkbox1">Check 1&2</label><br/>

<input class="check-allfeatured" name="checkbox[]"  id="checkbox2"  type="checkbox" value="on"/><label for="checkbox2">Check 1&2</label><br/>

<input class="check-alldel" name="deleteids[]"  id="deleteids1"  type="checkbox" value="on"/><label for="deleteids1">Check this only</label>

JavaScript：

$(document).ready(function(){
  $('.check-all:checkbox').click(function(event) {
      var group = 'input:checkbox[name=' + $(this).attr('name') + ']';
      console.log(group+':'+event.target.checked);
      $(group).each(function(){
          $(this).attr("checked",event.target.checked);
      });
  });

  $('.check-alldel:checkbox').click(function(event) {
      var group = 'input:checkbox[name=' + $(this).attr('name') + ']';
      console.log(group+':'+event.target.checked);
      $(group).each(function(){
          $(this).attr("checked",event.target.checked);
      });
   });

  $('.check-allfeatured:checkbox').click(function(event) {
      var group = 'input:checkbox[name=' + $(this).attr('name') + ']';
      console.log(group+':'+event.target.checked);
      $(group).each(function(){
          $(this).attr("checked",event.target.checked);
      });
  });
});
4

2 回答 2

1

下面的代码将检查所有复选框，因为group变量包含input:checkbox[name=checkbox[]]并且将选择您案例中的所有复选框。

$(group).each(function() {
  $(this).attr("checked", event.target.checked);
});
于 2012-04-17T12:52:17.717 回答
1

虽然不漂亮，但更正的版本在这里：http: //jsfiddle.net/j4m62/8/

您的问题是您没有在复选框名称断言的名称周围加上引号。

改变：

var group = 'input:checkbox[name=' + $(this).attr('name') + ']';

进入：

var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';

你会得到你所期望的行为。但是您确实有很多重复的代码，因此您可能应该重构，因为无论单击的复选框如何，您都在执行相同的操作。看看这个。

感谢@limelights 指出我忘记明确传递事件。更新的链接。

于 2012-04-17T12:56:14.997 回答