Analysis of checked Property Assignment in JavaScript: "checked" vs true

Introduction

In web development, when handling form elements such as radio buttons or checkboxes, it is often necessary to dynamically set their checked state. JavaScript provides multiple ways to achieve this, with two common methods being: document.getElementById('myRadio').checked = "checked"; and document.getElementById('myRadio').checked = true;. Although in most cases, these approaches seem to yield the same result—i.e., the element becomes checked—they differ significantly in underlying mechanisms, type handling, and code intent expression. This article aims to deeply analyze the differences between these two methods, based on DOM specifications, type coercion principles, and best practices, to provide clear technical guidance for developers.

Difference Between DOM Properties and HTML Attributes

To understand the assignment differences for the checked property, it is essential to distinguish between DOM properties and HTML attributes. In HTML, checked is a boolean attribute, where its presence or absence determines the initial checked state of an element. For example, in HTML markup, <input type="radio" checked> indicates that the radio button is checked by default. When a browser parses HTML, it creates corresponding DOM elements and maps HTML attributes to DOM properties.

The checked property in the DOM is a boolean value, which can only be true or false. In contrast, the checked attribute in HTML is a string, typically set to "checked" (although in HTML5, boolean attributes can omit values, strings are commonly used when setting them). This distinction leads to different behaviors during assignment: when setting DOM properties via JavaScript, boolean values should be used; whereas when manipulating HTML attributes, strings are employed.

Type Coercion Mechanism

When executing document.getElementById('myRadio').checked = "checked";, the JavaScript engine performs implicit type coercion. Since the checked property expects a boolean value, the string "checked" is converted to a boolean. In JavaScript, non-empty strings are treated as true in boolean contexts, so the element becomes checked after assignment. Similarly, if assigned an empty string "" or other non-empty strings, the result is also true, as any non-empty string coerces to true. This explains why "checked" and true behave identically in practice.

In contrast, document.getElementById('myRadio').checked = true; directly assigns a boolean value, avoiding type coercion. This is not only more efficient—bypassing additional conversion steps—but also clearer in expressing developer intent: explicitly setting the checked state to true.

Code Examples and In-Depth Analysis

To further illustrate, consider the following code snippets:

// Example 1: Using string assignment
var radio = document.getElementById('myRadio');
radio.checked = "checked";
console.log(radio.checked); // Output: true
console.log(typeof radio.checked); // Output: "boolean"

// Example 2: Using boolean assignment
radio.checked = true;
console.log(radio.checked); // Output: true
console.log(typeof radio.checked); // Output: "boolean"

In Example 1, although assigned the string "checked", the value of radio.checked is coerced to boolean type, outputting true. This demonstrates JavaScript's dynamic typing feature. Example 2 directly uses a boolean value, maintaining type consistency.

From a performance perspective, boolean assignment has a slight advantage, as it eliminates the overhead of type coercion. In modern JavaScript engines, this difference may be negligible, but in large-scale applications or performance-sensitive scenarios, cumulative effects can be significant.

Browser Compatibility and Best Practices

For projects requiring support for IE7 and later versions, both methods are functionally compatible. IE7 and above adhere to DOM standards, correctly handling type coercion. However, from the standpoint of code maintainability and readability, it is recommended to use the boolean value true. Reasons include:

• Clarity of Intent: Using true directly indicates setting the checked state, whereas the string "checked" might be misinterpreted as manipulating an HTML attribute.
• Type Safety: Boolean assignment avoids potential errors from implicit coercion, e.g., if other strings are mistakenly used in future code refactoring, leading to unexpected behavior.
• Consistency: In JavaScript, other boolean properties such as disabled, readOnly, etc., should also use boolean values, maintaining a uniform style.

Additionally, if HTML attribute manipulation is involved, methods like setAttribute and removeAttribute should be used. For example:

// Setting HTML attribute
radio.setAttribute('checked', 'checked');
// Removing HTML attribute to uncheck
radio.removeAttribute('checked');

Note that setting an HTML attribute also affects the DOM property, but the converse is not true. This highlights the importance of distinguishing between the two in complex interactions.

Conclusion

In summary, document.getElementById('myRadio').checked = "checked"; and document.getElementById('myRadio').checked = true; are functionally equivalent, both setting the element to a checked state via type coercion. However, from a technical essence perspective, the former relies on implicit coercion, while the latter directly uses a boolean value. Based on efficiency, code clarity, and maintainability, it is recommended to always use the boolean value true to set the checked property in JavaScript. For IE7+ compatibility, both methods work, but boolean assignment aligns better with modern development best practices. Developers should deeply understand the differences between DOM and HTML attributes to write more robust and readable code.