JavaScript/jQuery로 선택한 라디오 버튼의 값 가져오기
이 게시물에서는 JavaScript 및 jQuery에서 선택한 라디오 버튼의 값을 가져오는 방법에 대해 설명합니다.
선택한 라디오 버튼을 얻으려면 다음을 사용할 수 있습니다. :checked 모든 라디오를 나타내는 CSS 의사 클래스 선택기(<input type="radio">) 체크되어 있습니다. jQuery 및 일반 JavaScript에서 이를 여러 가지 방법으로 사용할 수 있습니다.
1. jQuery 사용하기
1. .val() 메소드를 사용하여 일치하는 라디오 요소의 값을 얻을 수 있습니다. 옵션을 선택하지 않으면 정의되지 않은 값을 반환합니다.
다음 코드는 .is() 이벤트 핸들러 내부에서 라디오 버튼이 선택되면 true를 반환합니다.
JS
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('button').click(function() { var value = $("input[type=radio][name=contact]:checked").val(); if (value) { alert(value); } else { alert('Nothing is selected'); } }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
2. jQuery .filter() 메소드는 선택기 표현식을 가져와 현재 요소 세트와 일치시킵니다.
JS
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('button').click(function() { var radio = $("input[type=radio][name=contact]").filter(":checked")[0]; if (radio) { alert(radio.value); } else { alert('Nothing is selected'); } }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
2. JavaScript 사용하기
JavaScript를 사용하면 각 <radio> 버튼 사용 for…of 고리:
JS
|
1 2 3 4 5 6 7 8 9 |
document.getElementById('submit').onclick = function() { var radios = document.getElementsByName('contact'); for (var radio of radios) { if (radio.checked) { alert(radio.value); } } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
다음 코드로 단축할 수 있습니다.
JS
|
1 2 3 4 5 |
document.getElementById('submit').onclick = function() { var radios = document.getElementsByName("contact"); var selected = Array.from(radios).find(radio => radio.checked); alert(selected.value); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
또는 다음을 사용할 수 있습니다. querySelector() 일치하는 요소에 액세스하는 방법입니다.
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { var selected = document.querySelector('input[type=radio][name=contact]:checked'); alert(selected.value); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
JavaScript 및 jQuery에서 선택한 라디오 버튼의 값을 가져오는 것이 전부입니다.
또한 참조: