CODEWITHSUNDEEP
javascriptjquery
Kyle Underhill
Kyle Underhill

Reputation: 109

uncheck checkbox on click

How do I uncheck all of input[name='select-check'] on click of the .toggle button?

$(".toggle").click(function() {
  if ($("input[name='select-check']:checkbox").is(":checked")) {
    $(".select-all").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>

Upvotes: 0

Views: 79

Answers (4)

Michalis
Michalis

Reputation: 6936

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

Upvotes: 1

Eddie
Eddie

Reputation: 26854

No need for if code. You can just .prop("checked", false) directly. And use select-check for name selector.

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

Upvotes: 3

Hrishikesh
Hrishikesh

Reputation: 632

Just use the same selector you used in the if condition

$(".toggle").click(function() {
  if ($("input[name='select-check']:checkbox").is(":checked")) {
    $("input[name='select-check']").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>

Upvotes: 1

Kiran Shahi
Kiran Shahi

Reputation: 7970

You have used wrong class (selector), instead of .select-all you need to use .select-input. Because your check boxes has class="select-input" not class="select-all"

$(".toggle").click(function() {
  if ($("input[name='select-check']:checkbox").is(":checked")) {
    $(".select-input").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>

Upvotes: 1

Related Questions