2010-05-12 16 views
0

J'ai ce code javascript côté:Javascript: changer de classe li si case est cochée (la charge)

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

Et ceci sur 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> 
    </ul> 

Eh bien ce que je ne peux pas obtenir le travail est Lorsque la case à cocher est cochée, le JS doit le vérifier et attribuer class="yes" au li, ici: <li id="selectedAuthorities-4_1li" class="">

Des suggestions? Merci

Répondre

1

On dirait que vous utilisez le mauvais identifiant pour faire référence à la LI au sein du gestionnaire onclick de l'ancre, essayez:

document.getElementById('selectedAuthorities-4_1li').click(); 
+0

Je l'ai déjà surclic, vérifiez html. J'ai besoin d'un exemple pour mettre à jour mon JS pour vérifier onLOAD si la case est cochée et dans ce cas, faire className = 'yes' – BoDiE2003

0

Il y a deux façons de s'y prendre face à cette situation très commune:

  1. Initialisez la classe avec la logique côté serveur en fonction des données côté serveur qui déterminent le paramètre de la case à cocher. Parfois c'est facile, parfois non.

  2. Déposez un petit bloc <script> qui déclenche l'opération "clic". C'est en quelque sorte une douleur parce que vous voulez déclencher le clic sans la case à cocher basculer; exactement comment vous faites cela dépend de la façon dont vos événements sont mis en place en général, mais dans votre cas, il faut juste appeler la fonction. Fonction

Votre « de changeSelectionStyle » devrait vraiment être prendre la décision de ce que le nom de la classe doit être d'abord inspecter la case à cocher directement, à mon avis. Peut-être que le paramètre «vérifié» de la case à cocher pourrait être un paramètre distinct de la fonction.

0

Vous utilisez onload sur un élément d'entrée qui n'est pas un événement valide pour ce type d'élément. Vous aurez besoin d'utiliser le onload sur l'élément du corps:

<body onload="changeSelectionStyle('selectedAuthorities-4_1li');"> 

Il est évident que dans votre application réelle, vous aurez à boucle pour tous vos LI. En utilisant jQuery pour cela serait beaucoup plus simple