How to Dynamically Check or Uncheck Checkboxes with JavaScript?

<h2>Manipulating Checkbox States Dynamically with JavaScript</h2>

JavaScript provides various methods to control the checked state of a checkbox from a web page. Here's how to check or uncheck a checkbox:

<h3>Using the Checked Property</h3>

The checked property of a <input type="checkbox"> element can be directly set to true or false to check or uncheck it.

<pre>
// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;
</pre>

<h3>Using jQuery (v1.6 )</h3>

jQuery provides prop(), a more flexible method for manipulating element properties, including the checked state:

<pre>
// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);
</pre>

<h3>Using jQuery (v1.5-)</h3>

Prior to jQuery v1.6, the attr() method was used for property manipulation. While still functional, it's not the most reliable approach for checkboxes:

<pre>
// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);
</pre>

By leveraging these methods, you can dynamically update checkbox states, enabling you to build interactive web interfaces and control form inputs programmatically.

The above is the detailed content of How to Dynamically Check or Uncheck Checkboxes with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!