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

小提琴- 为同一艘船上的任何人完成的小提琴-

我正试图根据文本框中的文本取消选中所有复选框。如果textbox的值等于Uncheck All I want All，则在其容器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);
    }
  });
});

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

这是因为您将表单包装在p标签中。试着把你的表单放在div中，它应该会像预期的那样工作

这是因为您将表单包装在p标记中。试着把你的表单放在div中，它应该会像预期的那样工作

---

您的问题是此选择器：

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

---

返回[]空。

您的问题在于此选择器：

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

---

返回[]空。

只需使用$'input:checkbox'。删除'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');

---

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

只需使用$'input:checkbox'。删除'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');

---

您也可以在这里应用任何循环。

基本上您的代码可以工作。失败的是输入的选择器。您可以通过修复选择器来修复此问题，例如juste use input[type=text]

您还可以改进其他方面，我已经更新了您的jsbin：

通过执行以下操作，您可以显著简化代码并使其更具可读性：

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

旁注：不允许在第p段内使用表单标签。由于p元素内部不允许使用内联元素，因此浏览器仅假设p标记未关闭，并自行关闭它。这就是结果，这就是选择器不工作的原因：

表单不再位于p元素中

---

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

基本上您的代码可以工作。失败的是输入的选择器。您可以通过修复选择器来修复此问题，例如juste use input[type=text]

您还可以改进其他方面，我已经更新了您的jsbin：

通过执行以下操作，您可以显著简化代码并使其更具可读性：

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

旁注：不允许在第p段内使用表单标签。由于p元素内部不允许使用内联元素，因此浏览器仅假设p标记未关闭，并自行关闭它。这就是结果，这就是选择器不工作的原因：

表单不再位于p元素中

---

---

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

我建议使用val.toLowerCase，这样您就不需要完全取消选中AllI，我只需要写入un，我可以从数据列表中输入Uncheck All，作为一种自动完成。如JQuery UIYeah中所示，这是正确的，但如果用户希望编写它而不是单击。我建议使用val.toLowerCase，这样您就不需要完全取消选中AllI，我只需要编写un，我可以从数据列表中输入Uncheck All，作为一种自动完成。正如jQueryUIYeah中所看到的，这是正确的，但是如果用户希望编写它而不是单击。我不明白为什么p或div在这方面起作用。我看到了区别，但我不明白为什么会发生这种情况。@mikethedj4根据规范P标记不允许包含任何非内联元素的元素。表格是一块一块的。有关详细信息，请参阅。@mikethedj4这是因为只允许包含文本或“内联”标记。然而，a算作“块”内容，而不是“内联”内容。我以前以为我很生气，现在我想，啊，都是因为一段lol。无论如何，谢谢大家。这非常有帮助。我不明白为什么p或div会在这方面起作用。我看到了区别，但我不明白为什么会发生这种情况。@mikethedj4根据规范P标记不允许包含任何非内联元素的元素。表格是一块一块的。有关详细信息，请参阅。@mikethedj4这是因为只允许包含文本或“内联”标记。然而，a算作“块”内容，而不是“内联”内容。我以前以为我很生气，现在我想，啊，都是因为一段lol。无论如何，谢谢大家。这非常有用。我知道这一点，但我只想选择那些容器中的输入类型复选框。有解决方法吗？首先按照@felix的建议重新构建html。请注意，在演示中，p的结束标记显示为红色。还要注意，$'.number-2>form'返回空。将p标记更改为div。请参阅工作示例：我知道这一点，但我只想选择那些容器中的输入类型复选框。有解决办法吗？从重新开始

---

按照@felix的建议构建html。请注意，在演示中，p的结束标记显示为红色。还要注意，$'.number-2>form'返回空。将p标记更改为div。请参阅工作示例：我知道这一点，但我只想选择输入类型复选框在其容器中。有解决办法吗？@mikethedj4我已经更改了答案，请检查它是否解决了您的询问。我知道，但我只想选择输入类型复选框在它的容器中。有解决办法吗？@mikethedj4我已经更改了我的答案，请检查它是否解决了您的询问。我刚刚了解到该段落没有被用作流程。谢谢你的帮助。顺便说一句，我+1你的帖子。更简单，更容易阅读，我学习了一个新的处理程序。@mikethedj4编辑了我的文章。如果你需要坚持这种HTML结构，你可以在表单标记上设置类。我刚刚了解到段落没有被用作流。谢谢你的帮助。顺便说一句，我+1你的帖子。更简单，更容易阅读，我学习了一个新的处理程序。@mikethedj4编辑了我的文章。如果你需要坚持这个HTML结构，你可以在表单标签上设置类。