| site_link1 | https://stackoverflow.com/questions/4909...io-buttons |
|---|---|
| site_link2 | |
| site_link3 |
링크1에서 답변들중 첫번째와 두번째 댓글에서의 방식들을 적용해서 올바르게 값을 취할 수 있었는데
첫번째 답변에서의 샘플은 click 이벤트가 다른 동작과 중첩될 수 있어서 두번째 방식으로 적용해서 안전하게 사용중이다
가령 radio item 선택 동작 외에 해당 라디오가 속한 폼을 선택하여 다른 페이지로 이동해야 하는 동작이 이미 선언된 경우엔 첫번째 방식으로는 구현이 불가하다
두번째는 라디오 아이템들을 동일한 class로 명명하여 group을 취할 수 있기 때문에 매우 안전하고 유용하게 취득이 가능하다
<div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="option" class="option_gender" autocomplete="off" value="All" checked=""> Unisex
</label>
<label class="btn btn-secondary">
<input type="radio" name="option" class="option_gender" autocomplete="off" value="Male"> Man
</label>
<label class="btn btn-secondary">
<input type="radio" name="option" class="option_gender" autocomplete="off" value="Female"> Woman
</label>
</div>
function getActive(){
console.log( document.querySelector('.option_gender:checked').value );
}
document.querySelectorAll(".option_gender").forEach( input => input.addEventListener('click', getActive) );
