Check if checkboxes are selected on page load and add a class to parent html li

Question

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">

Answer 1

To run something on page load (actually, when the DOM is ready), use this:

document.observe("dom:loaded", function() {
    init()
});

You can then select all of the inputs and if they're checked, add a class name to its parent:

function init() {
    $(document.body).select('input').each(function(element) {
        if(element.checked) {
            element.up().addClassName('yes')
        }
    })
}

If you want to get more specific and select the LI (in case there's other markup wrapping the input) you can substitute:

element.up('li').addClassName('yes')

Answer 2

Assuming that you can use prototype, and that you can change the HTML produced, i recommend you to give a class to every checkbox..here's what im thinking.

<li id="selectedAuthorities-4_1li">
   <input type="checkbox" class="example_class">
...
</li>

Then using prototype you can iterate through every checkbox using the CSS selector $$

$$('.example_class');

Assuming you want to add a "selected" class to the checkbox parent, you can do:

$$('.example_class').each(function(element) {
    if (element.checked) {
        element.up().addClassName('selected');
    }
});

To run all this code when the dom has finished loading, you can wrap all this code inside of this observer:

document.observe("dom:loaded", function() {
    //the above code here
});

If you are willing to use prototype (or any javascript framework), invest some time in learning it, you will get a much better code than the one you produce without it