jQuery Checkbox Check / Uncheck Examples

Among all the form elements, the check box is one of the essential element that we get to work with, almost every day.  So at one point of time or the other, it might be useful to check a checkbox or uncheck a checkbox dynamically using jQuery. So in this article, I am going to share very easy ways to use the checked property to check and uncheck checkbox. Easy examples with demos follow, so it’s super easy to follow along.

How To Check Or Uncheck Checkbox Using jQuery

Let’s assume that we have a checkboxe with ID “mycheckbox”. Now let’s see how to check and uncheck this checkbox when two different buttons are clicked by means of examples.

Here’s the common HTML for the following examples:

<input name="mycheckbox" type="checkbox" id="mycheckbox" /> This is my checkbox

<p>	
<input type="submit" name="sbt_check" id="sbt_check" value="Check Checkbox">

<input type="submit" name="sbt_uncheck" id="sbt_uncheck" value="Uncheck Checkbox">

</p>

Example 1: Check a Checkbox when a button is clicked

	//Check a checkbox
	$('#sbt_check').on("click", function(e){		

		$('#mycheckbox').prop('checked', true);

		e.preventDefault();

	});

Example 2: Uncheck a Checkbox when a button is clicked

	//Uncheck a checkbox
	$('#sbt_uncheck').on("click", function(e){		

		$('#mycheckbox').prop('checked', false);

		e.preventDefault();

	});

Simple, isn’t it?

Do you know of any other ways to check or uncheck a checkbox using jQuery? Feel free to suggest by commenting below.