Question

如何点击input[name='select-check']按钮取消选中所有.toggle？

＆＃13;

$(".toggle").click(function() {
  if ($("input[name='select-check']:checkbox").is(":checked")) {
    $(".select-all").prop("checked", false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">remove checks.</button>
<div class="post-list">
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 1
  </div>
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 2
  </div>
</div>

＆＃13;

Answer 1

无需if代码。您可以直接.prop("checked", false)。并使用select-check作为名称选择器。

$(".toggle").click(function() {
    $("input[name='select-check']:checkbox").prop("checked", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">remove checks.</button>
<div class="post-list">
  <div class="item">
    <label class="pick-select">
	<input type="checkbox" class="select-input" name="select-check">
	</label> 1
  </div>
  <div class="item">
    <label class="pick-select">
	<input type="checkbox" class="select-input" name="select-check">
	</label> 2
  </div>
</div>

Answer 2

您使用了错误的类（选择器），而不是.select-all，您需要使用.select-input。因为您的复选框中有class="select-input"而不是class="select-all"

＆＃13;

$(".toggle").click(function() {
  if ($("input[name='select-check']:checkbox").is(":checked")) {
    $(".select-input").prop("checked", false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">remove checks.</button>
<div class="post-list">
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 1
  </div>
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 2
  </div>
</div>

＆＃13;

Answer 3

只需使用您在selector条件中使用的if

＆＃13;

$(".toggle").click(function() {
  if ($("input[name='select-check']:checkbox").is(":checked")) {
    $("input[name='select-check']").prop("checked", false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">remove checks.</button>
<div class="post-list">
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 1
  </div>
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 2
  </div>
</div>

＆＃13;

Answer 4

$(".toggle").on('click',function() {
    $("input[name='select-check']:checkbox").prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">remove checks.</button>
<div class="post-list">
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 1
  </div>
  <div class="item">
    <label class="pick-select">
<input type="checkbox" class="select-input" name="select-check">
</label> 2
  </div>
</div>

取消选中单击复选框

4 个答案: