Comment obtenez-vous une fonction de clic pour travailler indépendamment

Question

Je me demande si vous pouvez m'aider. J'utilise le code ci-dessous et je voulais savoir si quelqu'un savait comment faire fonctionner la fonction dans le JS de manière indépendante sur les UL plutôt interférer les uns avec les autres. Fondamentalement, lorsque la page se charge, elle appelle la fonction JS qui vérifie les entrées du formulaire pour le bouton radio coché et applique une classe CSS spécifique pour définir les styles et mettre en surbrillance à son parent LI dans le balisage HTML. Il fonctionne également à partir de l'événement click si vous choisissez une autre option dans la liste des boutons radio pour supprimer les styles qui ont été appliqués à n'importe quelle LI et placer la classe sur le LI correspondant de l'option sur laquelle vous avez cliqué

Maintenant, le problème réside dans le fait que je le vérifie par rapport à un formulaire (qui contient l'UL et les enfants qui contiennent la liste des boutons radio) où il y a deux listes de boutons radio différentes qui ne respectent pas le code. le formulaire pour appliquer le code. Cela fonctionne très bien si je n'ai qu'une seule UL alors j'ai vraiment besoin que le JS soit un peu plus «intelligent» et fonctionne sur l'UL correspondante sur laquelle j'ai cliqué sans affecter l'autre. Je veux toujours mettre en surbrillance le bouton radio coché sur les deux listes sur le chargement de la page si

J'apprécierais grandement toute aide.

HTML:

<form id="myForm"> 
    <ul id="activityChoices" class="radioList"> 
     <li class="radio-item"> 
      <input type="radio" id="radio1" name="radio" value="radio1"> 
      <label for="radio1">radio1</label> 
     </li> 
     <li class="radio-item"> 
      <input type="radio" id="radio2" name="radio" value="radio2"> 
      <label for="radio2">radio2</label> 
     </li> 
     <li class="radio-item"> 
      <input type="radio" id="radio3" name="radio" value="radio3" checked="checked"> 
      <label for="radio3" >radio3</label> 
     </li> 
     <li class="radio-item"> 
      <input type="radio" id="radio4" name="radio" value="radio4"> 
      <label for="radio4" >radio4</label> 
     </li> 
    </ul> 
    <ul> 
     <li> 
      <input type="radio" id="yes" name="answer" value="yes"> 
      <label for="yes">yes</label> 
     </li> 
     <li> 
      <input type="radio" id="no" name="answer" value="no"> 
      <label for="no">no</label> 
     </li> 
    </ul> 
</form> 
<script type="text/javascript"> 
    highlightSelectedRadio('myForm','input'); 
</script> 

JS:

function highlightSelectedRadio(myForm, tag) 
{ 
    var form = document.getElementById(myForm); 
    var inputArray = form.getElementsByTagName(tag); 
    var prevClass = null; 

    for (i=0;i<inputArray.length;i++) { 
    if(inputArray[i].checked) { 
     prevClass = inputArray[i].parentNode.getAttribute("class"); 
     inputArray[i].parentNode.className += " myclass"; 
    } 
    } 

    var myArray = form.getElementsByClassName("myclass"); 
    form.onclick = function() { 
    for (j=0;j<myArray.length;j++) { 
     myArray[j].className = prevClass; 
    } 
    inputArray = this.getElementsByTagName(tag); 

    for (i=0;i<inputArray.length;i++) { 
     if(inputArray[i].checked) { 
     inputArray[i].parentNode.className += " myclass"; 
     } 
    } 
    } 
} 

Answer 1

Si je comprends bien votre question, je pense que c'est ce que vous avez besoin:

function highlightSelectedRadio(myForm, tag) 
{ 
    var form = document.getElementById(myForm); 
    var radios = form.getElementsByTagName(tag); 

    for (var i=0, l = radios.length;i < l; i++) { 
     if (radios[i].checked) { 
      addClass(radios[i].parentNode, 'myclass'); 
     } 
    } 

    form.onclick = function() { 
     for (var i = 0, l = radios.length; i < l; i++) { 
      if (radios[i].checked) { 
       addClass(radios[i].parentNode, 'myclass'); 
      } else { 
       removeClass(radios[i].parentNode, 'myclass'); 
      } 
     } 
    }; 
} 

function addClass(el, c) { 
    if (el.className.indexOf(c) === -1) { 
     el.className += ' myclass'; 
    } 
} 
function removeClass(el, c) { 
    var re = new RegExp(' ?' + c + ' ?'); 
    el.className = el.className.replace(re, ''); 
}