Javascript: Onload if checkbox is checked, change li class

I have this code on javascript side:

function changeSelectionStyle(id) {
    if(document.getElementById(id).className != 'yes'){
    document.getElementById(id).className = 'yes';
    }
    else{document.getElementById(id).className = '';}
}

And this on html:

<ul>
  <li id="selectedAuthorities-4_1li" class="">
    <input type="checkbox" id="selectedAuthorities-4_1" name="selectedAuthorities" value="ROLE_ADD_COMMENT_TO_CV" checked="checked" onload="changeSelectionStyle(this.id + 'li');" 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>

Well what I cant get work is when the checkbox is selected, on load, the JS should check it, and assign class="yes" to the li, here: <li id="selectedAuthorities-4_1li" class="">

What should I add to my original JS function to make that possible. Note that li ids are not static, they are dynamic, the html li id is generated.

Process for the solution (logic):

Event on load, check if the input with X id is checked, if it is, update the parent li with the JS function changeSelectionStyle. Because the problem that I have right now, is that when I select an input (check it), the li color is switching, but when it loads with a selected/checked input, the color remains untouched, and its changing the color when I click the input (uncheck it - wrong effect)

ansaurus

tags:

views:

answers:

Javascript: Onload if checkbox is checked, change li class

related questions