CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Adil Khalil
Adil Khalil

Reputation: 2121

Uncheck Checkbox using Javascript/JQuery

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.

Upvotes: 0

Views: 2488

Answers (2)

Dave
Dave

Reputation: 10924

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

Upvotes: 1

taveras
taveras

Reputation: 495

$('#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')

Upvotes: 1

Related Questions