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 中国語 Web サイトの他の関連記事を参照してください。