Cochez si les cases à cocher sont sélectionnées lors du chargement de la page et ajoutez une classe au parent html li

Question

Je cherche un moyen de le faire avec le prototype, ce js, a besoin de charger avec la page et d'interagir sur tous les éléments (entrées - cases à cocher, ce cas) avec l'identifiant donné et affecter une classe à son parent <li></li>

la JS est:

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 = '';} 
    */ 

} 

et le code HTML (morceau de celui-ci) qui interagit avec ce JS est:

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

Après itération, la vérification est la case est cochée, il doit ajouter le class="yes" au <li id="selectedAuthorities-4_1li">

Answer 1

Pour exécuter quelque chose sur la charge de la page (en fait, lorsque le DOM est prêt), utilisez ceci:

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

vous pouvez alors sélectionner toutes les entrées et si elles sont vérifiées, ajoutez un nom de classe à son parent:

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

Si vous voulez être plus précis et sélectionnez le LI (dans le cas où il y a d'autres balises enveloppant le entrée) vous peut remplacer:

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

Answer 2

En supposant que vous pouvez utiliser prototype, et que vous pouvez modifier le code HTML produit, je vous recommande de donner une classe à ce que la pensée im chaque checkbox..here.

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

Ensuite, en utilisant un prototype que vous pouvez parcourir chaque case en utilisant le sélecteur CSS $$

$$('.example_class'); 

En supposant que vous voulez ajouter une classe « sélectionnée » à la société mère de case à cocher, vous pouvez faire:

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

Pour exécuter tout ce code lorsque le dom a terminé le chargement, vous pouvez envelopper tout ce code à l'intérieur de cet observateur:

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

Si vous êtes prêt à utiliser prototype (ou tout autre framework javascript), investir un peu de temps à l'apprendre, vous obtiendrez un code beaucoup mieux que celui que vous produisez sans elle