[javascript] JavaScript로 라디오 버튼이 선택되었는지 어떻게 확인할 수 있습니까?
HTML 양식 내에 두 개의 라디오 버튼이 있습니다. 필드 중 하나가 null이면 대화 상자가 나타납니다. 라디오 버튼이 선택되었는지 어떻게 확인할 수 있습니까?
답변
이런 HTML이 있다고 가정 해 봅시다
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
클라이언트 측 유효성 검사를 위해 선택된 Javascript를 확인하는 Javascript가 있습니다.
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}
위의 내용은 마크 업의 정확한 특성에 따라 더 효율적으로 만들 수 있지만 시작하기에 충분해야합니다.
페이지의 아무 곳 이나 라디오 버튼이 선택 되어 있는지 확인하려는 경우 PrototypeJS를 사용하면 매우 쉽습니다.
다음은 페이지에서 하나 이상의 단일 선택 단추가 선택된 경우 true를 리턴하는 함수입니다. 다시 말하지만 특정 HTML에 따라 조정해야 할 수도 있습니다.
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
서버 측 유효성 검사 ( 유효성을 위해 Javascript에만 전적으로 의존 할 수는 없습니다!) 의 경우 선택한 언어에 따라 다르지만 gender
요청 문자열 의 값을 확인 합니다.
답변
jQuery를 사용하면 다음과 같습니다.
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
좀 더 명확하게 다루기 위해 조각으로 나눕니다. jQuery는 왼쪽에서 오른쪽으로 사물을 처리합니다.
input[name=gender]:checked
input
입력 태그로 제한합니다.[name=gender]
이전 그룹 내에서 성별이 성별 인 태그로 제한합니다.:checked
이전 그룹 내에서 선택된 확인란 / 라디오 버튼으로 제한합니다.
이를 피 checked="checked"
하려면 HTML 코드에서 라디오 버튼 중 하나를 선택 ( )으로 표시하십시오. 그러면 라디오 버튼 하나가 항상 선택됩니다.
답변
바닐라 자바 스크립트 방식
var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked) {
// get value, set checked flag or do whatever you need to
value = radios[i].value;
}
}
답변
그냥 바닐라 JavaScript로 던져진 CSS 선택기 설탕 으로 Russ Cam의 솔루션 을 개선하려고했습니다 .
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;
여기서 jQuery가 실제로 필요하지 않습니다. querySelectorAll은 현재 충분히 널리 지원됩니다.
편집 : CSS 선택기로 버그가 수정되었습니다. 따옴표를 생략 할 수는 있지만 생략 할 수는 있지만 어떤 경우에는 인용 부호를 남겨 두는 것이 좋습니다.
답변
HTML 코드
<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >
자바 스크립트 코드 :
var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
if(off_payment_method[i].checked) {
ischecked_method = true;
break;
}
}
if(!ischecked_method) { //payment method button is not checked
alert("Please choose Offline Payment Method");
}
답변
이 간단한 스크립트를 사용할 수 있습니다. 이름과 값이 다른 라디오 버튼 이 여러 개 있을 수 있습니다 .
var checked_gender = document.querySelector('input[name = "gender"]:checked');
if(checked_gender != null){ //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}
답변
이 페이지의 스크립트는 아래 스크립트를 작성하는 데 도움이되었으며,이 스크립트는보다 완전하고 보편적이라고 생각합니다. 기본적으로 양식의 라디오 버튼 수를 확인하므로 양식 내의 다른 라디오 그룹 각각에 대해 라디오 옵션이 선택되어 있어야합니다. 예를 들어 아래 시험 양식에서 :
<form id="FormID">
Yes <input type="radio" name="test1" value="Yes">
No <input type="radio" name="test1" value="No">
<br><br>
Yes <input type="radio" name="test2" value="Yes">
No <input type="radio" name="test2" value="No">
<input type="submit" onclick="return RadioValidator();">
RadioValidator 스크립트는 제출하기 전에 ‘test1’과 ‘test2’모두에 대한 답변이 제공되었는지 확인합니다. 양식에 라디오 그룹을 여러 개 가질 수 있으며 다른 양식 요소는 무시합니다. 누락 된 모든 라디오 응답은 단일 경고 팝업 내에 표시됩니다. 여기 사람들에게 도움이 되길 바랍니다. 모든 버그 수정 또는 유용한 수정을 환영합니다 🙂
<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
var ShowAlert = '';
var AllFormElements = window.document.getElementById("FormID").elements;
for (i = 0; i < AllFormElements.length; i++)
{
if (AllFormElements[i].type == 'radio')
{
var ThisRadio = AllFormElements[i].name;
var ThisChecked = 'No';
var AllRadioOptions = document.getElementsByName(ThisRadio);
for (x = 0; x < AllRadioOptions.length; x++)
{
if (AllRadioOptions[x].checked && ThisChecked == 'No')
{
ThisChecked = 'Yes';
break;
}
}
var AlreadySearched = ShowAlert.indexOf(ThisRadio);
if (ThisChecked == 'No' && AlreadySearched == -1)
{
ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
}
}
}
if (ShowAlert != '')
{
alert(ShowAlert);
return false;
}
else
{
return true;
}
}
</SCRIPT>