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

フォームをデザインする際に最も重要な HTML コンポーネントの 1 つは、ラジオ ボタンです。ユーザーは、ラジオボタンによって表示される選択肢の中から 1 つの選択肢だけを選択できます。

通常、HTML Web ページから要素の値を取得するには、JavaScript で要素の value 属性を使用するだけです。しかし、ラジオボタンの場合はそれができません。その理由は、個々のラジオ ボタンの値を取得するのは悪い考えだからです。

選択したラジオ ボタンの値を取得する方法を知るために、この記事を読み始めましょう。これには、checked 属性を使用します。

選択した属性を使用する

チェックされたプロパティはブール型プロパティです。存在する場合、ページの読み込み時に 要素が事前に選択 (チェック) される必要があることを示します。 Checked プロパティは、チェックボックスおよびラジオ入力タイプで使用できます。 JavaScript を使用すると、ページの読み込み後に checked 属性を変更することもできます。

＃＃＃文法＃＃＃

以下はプロパティを確認するための構文です -

リーリー

選択したラジオ ボタンの値を取得する方法をよりよく理解するために、いくつかの例を見てみましょう

＃＃＃例＃＃＃

以下の例では、選択されたラジオ ボタンの値を取得するスクリプトを実行します。

リーリー

スクリプトが実行されると、テキスト、ラジオ ボタン、クリック ボタンから構成される出力が生成されます。ユーザーがラジオ ボタンを選択してクリックすると、選択した値がポップアップに表示されます。

＃＃＃例＃＃＃

選択されたラジオ ボタンの値を取得するスクリプトを実行する次の例を考えてみましょう。

リーリー

上記のスクリプトを実行すると、出力ウィンドウがポップアップし、テキスト、ラジオ ボタン、送信ボタンが表示されます。ユーザーがラジオ ボタンを選択して送信ボタンをクリックすると、イベントが発生し、選択された値が表示されます。

querySelector() 関数を使用する

querySelector()

この関数は、指定されたセレクターまたはセレクターのセットに一致するドキュメントの最初の要素を返します。一致するものが見つからない場合は、Null が返されます。

＃＃＃文法＃＃＃

以下は

querySelector()

- の構文です。 リーリー ＃＃＃例＃＃＃ 次のコードを実行し、選択されたラジオ ボタンの値がどのように取得されるかを観察します。

リーリー

スクリプトを実行すると、テキスト、ラジオ ボタン、送信ボタンから構成される出力が生成されます。ユーザーが値を選択してボタンをクリックすると、選択した値を示すウィンドウがポップアップ表示されます。

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