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

Question

小提琴- http://jsbin.com/OruFonU/1/edit

完全小提琴(适用于任何同船的人)- http://jsbin.com/OruFonU/15/edit

我正在尝试根据文本框中的文本取消所有复选框。如果文本框的值等于“取消选中所有”，则希望在其容器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

基本上你的代码会起作用。失败的是输入的选择器。您可以通过修复选择器来解决这个问题，例如，只需使用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 2

这是因为您将form封装在p标记中。尝试将您的表单放入div中，它应该可以按预期工作。

演示

Answer 3

你的问题是这个选择器：

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

返回[]空。