앵커 태그를 클릭하고 체크의 관련 값을 반환합니다.

Question

3 세트의 라디오 버튼이 있습니다. 클래스 "라운드"로 특정 앵커를 클릭에 두 가지 일이 필요 관련된 라디오 버튼의

1. 설정은 특정 요소에 대한 확인 입력의 값 반환

2. 볼 수 있도록해야합니다.

일반 자바 스크립트로 해결책을 찾고 있습니다.

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> 

자바 스크립트

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> 

, 자바 스크립트와 속성을 추출 :

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