【问题标题】：Jquery for selecting all checkboxes not working用于选择所有复选框的 Jquery 不起作用
【发布时间】：2018-09-15 17:52:59
【问题描述】：

下面是我尝试在单击按钮时用来选择复选框的 jQuery；但是，单击按钮时，不会选中复选框。单击按钮不会执行任何操作。

用于选择所有复选框的 Jquery

$("#selectAllPubTypes").click(function () {
    $(".pubbox").each(function () {
        $(this).prop('checked',true);
    });
});

#Html for button and checkbox group.i have a group of checkboxes here.

 <a class="btn waves-effect waves-light" name="selectAllPubs" id="pubs" style="background-color: #0C2340">All</a>

{% for value, text in form.PUBS %}
    <label>
        <input type="checkbox" class= "filled-in pubbox" name="pubcheckbox" value={{ text }}/>
        <span style="font-size: medium">{{ text }}</span>
    </label>
{% endfor %}

【问题讨论】：

$("#selectAllPubTypes") 选择 ID 为 selectAllPubTypes 的元素，而您没有发布该元素。你需要发一个minimal reproducible example
你不需要.each()。 .prop() 将自动循环遍历集合中的所有元素。
#selectAllPubTypes 应该只是 #pubs。
@j08691 我认为他确实发布了一个 MCVE，并且错误就在其中：选择器中的 ID 与 All 链接的 ID 不同。
工作示例jsfiddle.net/xpvt214o/58932

标签： jquery html user-interface jquery-ui frontend

【解决方案1】：

在您的代码的 HTML 中没有 selectAllPubTypes ID，只有一个名为 selectAllPubs 的名称。链接/按钮有一个名为“pubs”的 ID。

还不如使用 .on("click")

$("#pubs").on('click', function() {
    $(".pubbox").each(function () {
        $(this).prop('checked',true);
    });
});


<a class="btn waves-effect waves-light" name="selectAllPubs" id="pubs" style="background-color: #0C2340">All</a>
{% for value, text in form.PUBS %}
    <label>
        <input type="checkbox" class= "filled-in pubbox" name="pubcheckbox" value={{ text }}/>
        <span style="font-size: medium">{{ text }}</span>
    </label>
{% endfor %}

【讨论】：

【解决方案2】：

所以你没有在你的 html 上将 id 设置为“selectAllPubTypes”，所以这样做不会有任何作用。试试这个

$(“#pubs”).click(function() {
   $(“.pubbox”).each(function() {
       $(this).prop(“checked”, true);
    });
});

【讨论】：

【解决方案3】：

您可能需要考虑切换“全部”按钮。考虑以下代码：

$(function() {
  $("#pubs").click(function(e) {
    e.preventDefault();
    if ($(this).data("checked") == undefined) {
      $(this).data("checked", false);
    }
    if ($(this).data("checked")) {
      $(".pubs-wrapper .pubbox").prop("checked", false);
      $(this).data("checked", false);
    } else {
      $(".pubs-wrapper .pubbox").prop("checked", true);
      $(this).data("checked", true);
    }
  });
});

.pubs-wrapper span {
  display: block;
  font-size: medium;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn waves-effect waves-light" name="selectAllPubs" id="pubs" style="background-color: #0C2340">All</a>
<div class="pubs-wrapper">
  <!--
Template:
{% for value, text in form.PUBS %}
<span>
  <input type="checkbox" class="filled-in pubbox" name="pubcheckbox[]" id="pubchk-{{value}}" value="{{ text }}" />
  <label for="pubchk-{{value}}">{{ text }}</label>
</span>
{% endfor %}
-->
  <span>
  <input type="checkbox" class="filled-in pubbox" name="pubcheckbox[]" id="pubchk-1" value="Text 1" />
  <label for="pubchk-1">Text 1</label>
  </span>
  <span>
  <input type="checkbox" class="filled-in pubbox" name="pubcheckbox[]" id="pubchk-2" value="Text 3" />
  <label for="pubchk-2">Text 2</label>
  </span>
  <span>
  <input type="checkbox" class="filled-in pubbox" name="pubcheckbox[]" id="pubchk-3" value="Text 3" />
  <label for="pubchk-3">Text 3</label>
  </span>
  <span>
  <input type="checkbox" class="filled-in pubbox" name="pubcheckbox[]" id="pubchk-4" value="Text 4" />
  <label for="pubchk-4">Text 4</label>
  </span>
</div>

用户可能想要全选或取消全选。这可以在正确配置的同一个按钮中完成。由于 Button 没有 'checked' 属性，我们可以使用.data() 来存储它。

另外，<label> 应与<input> 一起使用。将它用作包装器有点奇怪，没有错，只是不是 HTML 的最佳实践。

希望对您有所帮助。

【讨论】：