checked = "checked" vs checked = true

Question

What is the difference between the below two usages?

document.getElementById('myRadio').checked = "checked"; 

and

document.getElementById('myRadio').checked = true; 

For me, both are behaving the same way. But, I am just curious to know why there exist two methods to do the same.

Which one will be the ideal usage? I need to support IE7 and higher versions.

Answer 1

The element has both an attribute and a property named checked. The property determines the current state.

The attribute is a string, and the property is a boolean. When the element is created from the HTML code, the attribute is set from the markup, and the property is set depending on the value of the attribute.

If there is no value for the attribute in the markup, the attribute becomes null, but the property is always either true or false, so it becomes false.

When you set the property, you should use a boolean value:

document.getElementById('myRadio').checked = true; 

If you set the attribute, you use a string:

document.getElementById('myRadio').setAttribute('checked', 'checked'); 

Note that setting the attribute also changes the property, but setting the property doesn't change the attribute.

Note also that whatever value you set the attribute to, the property becomes true. Even if you use an empty string or null, setting the attribute means that it's checked. Use removeAttribute to uncheck the element using the attribute:

document.getElementById('myRadio').removeAttribute('checked'); 

Answer 2

document.getElementById('myRadio').checked is a boolean value. It should be true or false

document.getElementById('myRadio').checked = "checked"; casts the string to a boolean, which is true.

document.getElementById('myRadio').checked = true; just assigns true without casting.

Use true as it is marginally more efficient and is more intention revealing to maintainers.