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 セレクターを利用して、選択されたラジオ ボタンの値を取得します。
利点
このソリューションにはいくつかの利点があります:
実装
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 サイトの他の関連記事を参照してください。