0

<label> <input type="checkbox" class="check">hello</label>
<label> <input type="checkbox" class="check">world</label><br>
<input type="submit" class="clear" value="Clear"/>
Two checkbox here 1)click the two checkbox first 2)After clear button click to remove ticks using jquery
Vinothkumar Nataraj
  • 588
  • 2
  • 7
  • 23

4 Answers4

2

   $(document).on('click', 'input[type="submit"]', function(){ 
      $('.check').prop('checked', false);
   })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<label> <input type="checkbox" class="check">hello</label>
<label> <input type="checkbox" class="check">world</label><br>
<input type="submit" class="clear" value="Clear"/>
Adesh M
  • 436
  • 5
  • 10
1

You need to prevent the default action of submit button otherwise action over form will take place.

Use prop() method to set the checked property to false

$('.clear').on('click', function(e) {
  e.preventDefault();
  $('.check').prop('checked', false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label>
  <input type="checkbox" class="check">hello</label>
<label>
  <input type="checkbox" class="check">world</label>
<br>
<input type="submit" class="clear" value="Clear" />
Rayon
  • 36,219
  • 4
  • 49
  • 76
1

$('input:checkbox').removeAttr('checked'); by using this you can remove the selected checkboxes

$('.clear').on('click',function(){
$('input:checkbox').removeAttr('checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label> <input type="checkbox" class="check">hello</label>
<label> <input type="checkbox" class="check">world</label><br>
<input type="submit" class="clear" value="Clear"/>
Anto S
  • 2,448
  • 6
  • 32
  • 50
Renuka CE
  • 666
  • 1
  • 6
  • 15
  • 1
    If it is working give upvote to the answers and mark it as a correct answer. so that Others will get benifited from this answer – Renuka CE Jan 05 '16 at 06:25
  • 1
    OP must use `prop` over `removeAttr` as setting the `boolean` value to change the property makes more sense than `removing` and `adding` attribute. Refer [this](http://stackoverflow.com/questions/5874652/prop-vs-attr). – Rayon Jan 05 '16 at 06:34
1

This should work

<script>
$(document).ready(function(){
   $('.clear').on('click', function(){ 
      $('.check').prop('checked', false);
   })
});

<script>

if you have any trouble on this post the error you got on console.

Anto S
  • 2,448
  • 6
  • 32
  • 50