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