Klicken Sie auf ein Anker-Tag und den zugehörigen Wert des geprüften

Question

zurückgeben Ich habe 3 Sätze von Radio-Tasten. Beim Klicken benötigen einen bestimmten Anker mit Klasse „rund“ zwei Dinge passieren:

1. Set assoziierter Radiobuttons

2. Rückkehr der Wert des geprüften Eingang für das jeweilige Element sichtbar sein müssen.

Ich bin auf der Suche nach einer Lösung in plain 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

Ich nehme an, Sie auf jeder <form> ein zusätzliches Attribut setzen können. Beispiel:

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

Dann entpacken Sie das Attribut mit 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; 
}