点击一个锚定标记和返回的检查

Question

相关值I有3套单选按钮。在点击带班“圆”特定锚两件事情需要发生：

1. 集相关的单选按钮的必须是可见的

2. 返回该特定元素的检查输入的值。

我正在寻找一个普通的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

我想你可以把额外的属性上的每个<form>。例如：

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

然后，用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; 
}