使用文本框动态取消选中所有复选框的容器

Question

小提琴 - http://jsbin.com/OruFonU/1/edit
完成小提琴（对于那些在同一条船上的人） - http://jsbin.com/OruFonU/15/edit

我正在尝试根据texbox中的文本取消选中所有复选框。如果文本框的值等于“取消全部检查”，我希望在其容器div中取消选中所有复选框。 （并非全部，只是在可见容器内）

我尝试过以下但没有运气。

.removeAttr('checked');
.attr('checked', false);
.prop('checked', false);
.is(':checked', false);

这是完整的JQuery / Javascript

$(document).ready(function() {
  $('input[type=checkbox]').prop('checked', 'checked');
    $('.show').hide();
    $('.number-1').show();

  $(".show-nums").on('load change', function() {
    var val = $(this).val().toLowerCase();

    if( $("." + val) && $("." + val).length ){
      //check if there is a selector that corresponds to the value of the dropdown
      $('.show').hide();
      $("." + val).show();
    }
  });

  $(".search").on('keyup change', function() {
    var val = $(this).val();

    if(val === "Uncheck All") {
      $('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3 input[type=checkbox], .number-4 input[type=checkbox]').prop('checked', false);
    }
  });
});

如果有人能帮助我，我们将不胜感激。

Answer 1

这是因为您将form包裹在p标记内。尝试将表单放在div中，它应该按预期工作

Demo

Answer 2

基本上你的代码会起作用。失败的是输入的选择器。您可以通过修复选择器来解决这个问题，例如juste使用input[type=text]。

还有其他一些你可以改进的地方，我已经更新了你的jsbin：

http://jsbin.com/OruFonU/13/edit

通过这样做，您可以大大简化您的代码（并使其更具可读性）：

  $(".show-nums").on('load change', function() {
    var val = $(this).val();

    $('.show').hide();

    if( $("." + val) && $("." + val).length ){
      //check if there is a selector that corresponds to the value of the dropdown
      $("." + val).show();
    }
  });

旁注：段落（form）中不允许使用p个标记。由于p元素中不允许使用内联元素，因此浏览器只会假定p标记未关闭并由他自行关闭。这就是结果，这就是你的选择器无法工作的原因：

表格不再在P元素内。

如果您必须坚持使用HTML结构，我建议您在表单标记上设置.number-n。

Answer 3

你的问题是这个选择器：

  $('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3      input[type=checkbox], .number-4 input[type=checkbox]')

返回[]为空。

Answer 4

只需使用$（'input：checkbox'）。removeAttr（'checked'）;

$(".search").on('keyup change', function() {
    var val = $(this).val();

    if(val === "Uncheck All") {
       $('input:checkbox').removeAttr('checked');
});

我在你的小提琴中使用了它，它运行正常。

如果您想特别找到，那么您可以像这样使用

   $('.number-1').find('input[type=checkbox]:checked').removeAttr('checked'); 
   $('.number-2').find('input[type=checkbox]:checked').removeAttr('checked');
   $('.number-3').find('input[type=checkbox]:checked').removeAttr('checked');
   $('.number-4').find('input[type=checkbox]:checked').removeAttr('checked');

您也可以在此处应用任何循环。