Javascript: Check if checkboxes are selected on page load and add a class to parent html li
- by BoDiE2003
Im looking a way to do it with prototype, this js, needs to loads with the page and interate over all the elements (inputs - checkboxes, in this case) with the given id and assign a class to its parent <li></li>
The JS is:
function changeSelectionStyle(id) {
var inputId = id.substr(0,id.length-2);
if(document.getElementById(inputId).checked){document.getElementById(id).className = 'yes';}
alert(document.getElementById(inputId).checked);
/*
* if(document.getElementById(id).className != 'yes'){
* document.getElementById(id).className = 'yes';
* } else{document.getElementById(id).className = '';}
*/
}
And the HTML (piece of it) that interacts with this JS is:
<li id="selectedAuthorities-4_1li">
<input type="checkbox" id="selectedAuthorities-4_1" name="selectedAuthorities" value="ROLE_ADD_COMMENT_TO_CV" checked="checked" onclick="changeSelectionStyle(this.id + 'li'); checkFatherSelection(this.id);">
<a href="#" onclick="document.getElementById('selectedAuthorities-4_1').click(); return false;">
Agregar comentario
<samp><b></b>Permite agregar comentario en el detalle</samp>
</a>
</li>
After iteration, checking is the checkbox is checked, it has to add the class="yes" to the <li id="selectedAuthorities-4_1li">
