JavaScriptを使用してラジオボタンが選択されているかどうかを確認するにはどうすればよいですか?

HTML では、ラジオ選択 ボタンを使用して、開発者は選択に対して複数のオプションを作成できます。ユーザーは任意のオプションを選択でき、その値を取得して、ユーザーが複数のオプションの中からどのオプションを選択したかを知ることができます。

したがって、複数のオプションからの選択を理解するには、ユーザーがどのラジオ ボタンを選択したかを確認することが重要です。実際の例を通してそれを理解しましょう。フォームに記入して性別を選択するよう求めると、3 つの選択肢が表示され、選択できるのは 1 つだけです。

このチュートリアルでは、JavaScript を使用して ラジオ ボタンが選択されているかどうかを確認する 2 つの方法を学習します。

ラジオボタンのchecked属性を使用します

さまざまな方法を使用して、JavaScript の radio 要素にアクセスできます。その後、checked プロパティを使用して、選択したラジオ ボタンがチェックされているかどうかを確認できます。 selected 属性の値が true の場合、ラジオ ボタンが選択されていることを意味し、それ以外の場合は選択されていません。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、

radio

要素の checked 属性を使用して、radio ボタンがチェックされているかどうかを確認できます。 リーリー 上記の構文では、ID を使用してラジオ ボタンにアクセスし、checked 属性を使用して if ステートメントでラジオ ボタンが選択されているかどうかを確認します。

＃＃＃例＃＃＃

以下の例では、男性、女性などの異なる値を含む 3 つのラジオ ボタンを作成しました。 JavaScript では、ID によって各ラジオ ボタンにアクセスし、各ラジオ ボタンの「checked」属性の値を確認します。

ユーザーがラジオ ボタンを選択してクリックすると、選択したラジオ ボタンの値を示すメッセージが表示されます。

リーリー ＃＃＃例＃＃＃

下の例は上の例とほぼ同じですが、名前を使用してすべてのラジオ ボタンに一度にアクセスする点が異なります。 getElementByName() メソッドは、radio という名前のすべてのラジオ要素を返します。

その後、for-of ループを使用してラジオ ボタン配列をループし、「checked」属性を使用して各ラジオ ボタンがチェックされているかどうかを確認します。

リーリー

querySelector() メソッドを使用して、ラジオ ボタンが選択されているかどうかを確認します

プログラマは、JavaScript の querySelector() メソッドを使用して、任意の HTML 要素を選択できます。ここでは、querySelector() メソッドを使用して、選択されたラジオ ボタンのみを選択します。ラジオボタンが選択されていない場合は、null 値が返されます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って querySelector() メソッドを使用して、ラジオ ボタンが選択されているかどうかを確認できます。

リーリー

上記の構文では、「年」はラジオ ボタン グループの名前であり、「年」グループに属し、選択されているラジオ ボタンを返します。

＃＃＃例＃＃＃

以下の例では、ユーザーに 3 つの異なる選択肢を提供する 3 つのラジオ ボタンを作成しました。ユーザーが「選択した年を確認」ボタンをクリックすると、getSelectedRadio() 関数が呼び出されます。この関数は、querySelector() メソッドを使用して「年」という名前のラジオ ボタンを選択し、DOM からチェックします。

ユーザーは、ラジオ ボタンを選択しなくても、ボタンをクリックして出力を確認できます。

リーリー

ユーザーは、JavaScript を使用して選択されたラジオ ボタンを取得する 2 つの異なる方法を学習しました。コードを 1 行記述するだけで済むため、querySelector() メソッドを使用するのが最善の方法です。

以上がJavaScriptを使用してラジオボタンが選択されているかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。