單擊錨標記並返回已檢查的關聯值

Question

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