點擊一個錨定標記和返回的檢查

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; 
}