Uncheck Checkbox using Javascript/JQuery

Question

I have a simple Checkbox

<div>
   <input type="checkbox" id="chkBox1" value="Test" /> Test
</div>

MVC 5 renders this html for this checkbox

<div class="checker" id="uniform-chkBox1">
   <span class="checked">
     <input type="checkbox" value="Test" id="chkBox1">
   </span>
</div>

I want to uncheck this checkbox using Javascript/JQuery but I cannot figure it out. Using Firebug, when I remove the span class "checked" the checkbox gets unchecked but I cannot figure out how to do this in Javascript.

Checking/unchecking checkboxes with JavaScript has to be the #1 all time most asked dupe. — Evan Davis
– Evan Davis, Commented Oct 16, 2014 at 19:22
This sounds like an issue with your selector. How are you selecting your checkbox? — Gjohn
– Gjohn, Commented Oct 16, 2014 at 19:31

taveras · Accepted Answer · 2014-10-16 19:25:42Z

1

$('#chkBox1').prop('checked', true)

checks it off and

$('#chkBox1').prop('checked', false) turns if off.

Instead of prop(), you can also use attr()

If you instead want to just remove the class checked from the span element. you can do

$('#uniform-chkBox1 span.checked').removeClass('checked')

answered Oct 16, 2014 at 19:25

taveras

4953 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adil Khalil Over a year ago

Your answer is very close, only removing the checked class from span gets it unchecked but now to check it again, it requires 2 clicks. It just doesn't gets checked on first click :(

taveras Over a year ago

Perhaps there's some strange JavaScript is generates to handle this. Why don't you try both doing $('#chkBox1').prop('checked', false) and $('#uniform-chkBox1 span.checked').removeClass('checked') ?

Adil Khalil Over a year ago

Thank You very much, First I removed the span class and then set the .prop to false and it is working like a charm now.

Dave · Accepted Answer · 2014-10-16 19:29:44Z

1

Use .prop().

In your case $("#chkBox1").prop("checked", false); will uncheck and $("#chkBox1").prop("checked", true); will check.

Run code below to see in action.

setInterval(function() {
  if ($("#chkBox1").prop("checked"))
    $("#chkBox1").prop("checked", false);
  else
    $("#chkBox1").prop("checked", true);
  }, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="Test" id="chkBox1" checked />

edited Oct 16, 2014 at 19:29

answered Oct 16, 2014 at 19:23

Dave

11k3 gold badges45 silver badges54 bronze badges

Collectives™ on Stack Overflow

Uncheck Checkbox using Javascript/JQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related