JavaScript에서 선택한 라디오 버튼의 값을 효율적으로 얻으려면 어떻게 해야 합니까?

JavaScript에서 라디오 버튼 값 액세스

JavaScript에서 라디오 버튼 입력 작업을 할 때 선택한 옵션의 값을 검색하는 것이 중요합니다. 그러나 이러한 구현에 문제가 발생하면 실망스러울 수 있습니다. 일반적인 문제와 해결 방법을 조사해 보겠습니다.

문제

다음 코드 조각을 고려하세요.

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;
    for (i=0; i < sizes.length; i++) {
        if (sizes[i].checked==true) {
            return sizes[i].value;
        }
    }
}

의도한 목적에도 불구하고 이 코드는 선택한 라디오 버튼에 액세스하려고 하면 지속적으로 '정의되지 않음'을 반환합니다. value.

솔루션

이 문제를 해결하려면 querySelector() 메서드를 사용하여 최신 접근 방식을 활용할 수 있습니다.

document.querySelector('input[name="genderS"]:checked').value;

이 줄 코드는 querySelector() 내의 :checked 선택기를 활용하여 선택된 라디오 버튼의 값을 검색합니다.

장점

이 솔루션은 여러 가지 이점을 제공합니다.

• 브라우저 호환성: 이 방법은 여러 환경에서 원활하게 작동합니다. 다양한 웹 브라우저.
• 단순성: 복잡한 루프나 반복자가 필요 없는 간결하고 간단한 접근 방식입니다.
• 동적: 체크된 라디오 버튼은 위치에 상관없이 DOM.

구현

HTML:

<form action="#n" name="theForm">
    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</a>
</form>

JavaScript:

function submitForm() {
    var gender = document.querySelector('input[name="genderS"]:checked').value;
    alert(gender);
}

참고: 이 구현에는 jQuery 경로를 포함할 필요가 없습니다.

위 내용은 JavaScript에서 선택한 라디오 버튼의 값을 효율적으로 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!