用于选择所有复选框的Jquery

Question

下面是我点击按钮时用来选择复选框的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 %}

Answer 1

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

也可以使用.on（“点击”）

$("#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 %}

Answer 2

所以你的html上没有id设置为“selectAllPubTypes”所以这样做不会做任何事情。试试这个

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

用户可能想要全部选择或取消全选。这可以在相同的按钮配置正确完成。由于Button没有经过检查＆＃39;属性，我们可以使用.data()来存储它。

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

希望有所帮助。

Jquery用于选择所有不起作用的复选框

用于选择所有复选框的Jquery

3 个答案: