En cliquant sur un point d'ancrage et en renvoyant la valeur associée de la case cochée

Question

J'ai 3 ensembles de boutons radio. En cliquant sur un point d'ancrage particulier avec classe « rond » deux choses doivent se produire:

1. Jeu de boutons radio associés doivent être visibles

2. Renvoie la valeur de l'entrée vérifiée pour cet élément particulier.

Je suis à la recherche d'une solution en JavaScript.

HTML

<div class="radioset set1"> 
    <a href="#" class="round"></a> 
    <p class="name">John</p> 
    <form class="input" style="display:none;"> 
     <p><input type="radio" value="0-19" name="john">0-19</p> 
     <p><input type="radio" value="20-39" name="john">20-39</p> 
     <p><input type="radio" value="40-59" name="john">40-59</p> 
     <p><input type="radio" value="60-100" name="john">60-100</p> 
    </form> 
</div> 
<div class="radioset set2"> 
    <a href="#" class="round"></a> 
    <p class="name">Paul</p> 
    <form class="input" style="display:none;"> 
     <p><input type="radio" value="0-19" name="paul">0-19</p> 
     <p><input type="radio" value="20-39" name="paul">20-39</p> 
     <p><input type="radio" value="40-59" name="paul">40-59</p> 
     <p><input type="radio" value="60-100" name="paul">60-100</p> 
    </form> 
</div> 
<div class="radioset set3"> 
    <a href="#" class="round"></a> 
    <p class="name">Jack</p> 
    <form class="input" style="display:none;"> 
     <p><input type="radio" value="0-19" name="jack">0-19</p> 
     <p><input type="radio" value="20-39" name="jack">20-39</p> 
     <p><input type="radio" value="40-59" name="jack">40-59</p> 
     <p><input type="radio" value="60-100" name="jack">60-100</p> 
    </form> 
</div> 

JavaScript

var circle = document.getElementsByClassName("round"); 
var formInput = document.getElementsByClassName("input"); 

function inputToggle(i){ 
    let open = false; 
    let checked = false; 
    circle[i].addEventListener('click', function(e){ 
     e.preventDefault(); 
     if(open) { 
      open = false; 
       formInput[i].style.display = "none"; 
      } 
      else { 
       open = true; 
       formInput[i].style.display = "block"; 
       // how do i read the input of this set 
      } 
     }); 
    } 
// Calling the inputToggle function 
for(let i=0;i<3;i++){ 
    inputToggle(i); 
} 

Answer 1

Je suppose que vous pouvez mettre un attribut supplémentaire sur chaque <form>. Exemple:

<form data-input-name="jack" class="input" style="display:none;"></form> 

Ensuite, extraire l'attribut avec Javascript:

if(condition) { 
    // something 
} 
else { 
    open = true; 
    formInput[i].style.display = "block"; 
    // how do i read the input of this set 
    var inputName = formInput[i].getAttribute("data-input-name"); 
    var inputEle = formInput[i][inputName].value; 
}