ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で選択したラジオ ボタンの値を効率的に取得するにはどうすればよいですか?

JavaScript で選択したラジオ ボタンの値を効率的に取得するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-14 22:13:11
オリジナル
657 人が閲覧しました

How Do I Efficiently Get the Value of a Selected Radio Button in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート