[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>