Question

Brief: I need to grab the information in parentElement, but I need the input information updated. when I am grabbing the innerHTML of parentElement, after the box is unchecked, it still shows up checked. The html is not reflecting changes I’ve made with javascript.

I have a small snippet of my code here: http://jsfiddle.net/7993K/8/

<div id="parentElement">
<label id="thisLabel">
    <input type="checkbox" id="idnumber" checked="checked"> Bring Mail Inside
</label>
</div>
<p>
<a onClick="checkit()">Check it out</a>
</p>
<p onclick="checkToggle()">change to false</p>


function checkit() {
alert(document.getElementById("parentElement").innerHTML);
}
function checkToggle() {
element = document.getElementById("thisLabel");
element.childNodes[0].checked = false;
alert("the checkbox is checked: " + element.childNodes[0].checked);
}

The slightly longer version of why I am going about it like this:
This is a large form that a site inspector checked out. It is brought into an online software app, and the lady in charge of communication with clients will review this information, speak back with the inspector on the phone. This form is saved in a database as html. After the woman is done reviewing the form, there may be a box or two that wasn’t checked, that she would like to check, before emailing to the client ( there were issues, needed to be fixed, now that they are fixed, she can send out the proper report that everything was checked off)

She checks the boxes off, but they don’t update the HTML, they only change the value, which will show, but won’t show up when I get the innerHTML of parentElement. You will see in my JSFIDDLE http://jsfiddle.net/7993K/8/:

Click check it out upon loading: checked = checked

uncheck box: checked = checked

change to false: alert confirms the checked property is false, but check it out shows the innerHTML as checked.

I will need to access this innerHTML with the proper information loaded (as in, if it is checkmarked, the html should reflect that)

PRE-EDIT: I think I can do this by making an event onclick of the label. That event takes the (“parentElement”).innerHTML and split it in a few different places and put it back together with the right checked value. Will be slightly different if the input isn’t checked to begin with. That is the only way I can think of doing this, and it just doesn’t seem like the right way.

Answer 1

This is happening because element.childNodes[0].checked = false; is setting the DOM property, which is a separate entity than the HTML attributes.

Your checkit function should also be interrogating the DOM property, not checking the innerHTML.

See this question for more information about DOM properties and HTML attributes.