Change HTML checkbox checked attribute

Question

Is it possible to change the "checked" attribute of a checkbox? So I want to change the preselect value in the HTML. (So that I can get it later with innerHTML of JavaScript).

Answer 1

Sure, if you're going to use innerHTML in Javascript you could just reload the whole checkbox bit and make it checked or not. However the easier way to do it is to just change the checked attribute within Javascript if you're going to use JS anyway.

document.getElementById("myCheckboxId").checked = true;

EDIT

Ok, so you need to be able to get it again with innerHTML in the future. Like I said in my first sentence, you could just use innerHTML to change the checkbox as well. May be a bit hackish but could be fine if you're doing it already.

Here's a test html page with links to check/uncheck via JS, check/uncheck by swapping out the whole checkbox with innerHTML, and to get innerHTML for testing. When you do the innerHTML swap, it actually changes what's returned by innerHTML later. Is this what you mean? Note: hmm I didn't realize it until now but it appears that firefox is changing my checked to checked="checked", interesting. So the view innerHTML link shows me checked="checked" and when unchecked shows nothing. Firebug shows it change also, but slightly differently - going from checked="" to nothing.

Here is jsfiddle!

<span id="testdiv1"><input type="checkbox" name="heyhey" id="heyhey" CHECKED></span>
<p>
    <a href="#" onClick="document.getElementById('heyhey').checked = false;">uncheck via JS</a><br>
    <a href="#" onClick="document.getElementById('heyhey').checked = true;">check via JS</a><br>
    <a href="#" onClick="document.getElementById('testdiv1').innerHTML = '<input type=\'checkbox\' name=\'heyhey\' id=\'heyhey\' >';">uncheck via innerHTML swap</a><br>
    <a href="#" onClick="document.getElementById('testdiv1').innerHTML = '<input type=\'checkbox\' name=\'heyhey\' id=\'heyhey\' checked>';">check via innerHTML swap</a><br>
    <a href="#" onClick="alert('innerHTML!: '+'\n\n'+getElementById('testdiv1').innerHTML)">view innerHTML</a>
</p>

I don't know if I escaped all those properly but works for me. Best to not do it inline.

Answer 2

Sounds like you have a legitimate use for setAttribute() rather than the equivalent property (checked). Assuming you have a checkbox stored in a variable called checkbox, you can use the following to set the checked attribute to be checked by default:

checkbox.setAttribute("checked", "checked");

... and the following to remove the attribute and make the checkbox unchecked by default:

checkbox.removeAttribute("checked");

Note that this won't work properly on older IE, which has broken implementations of attribute-related methods.

I've written about this in more detail in an answer to previous question: Add attribute 'checked' on click jquery