デフォルトでラジオボタンを選択するにはどうすればよいですか?

Deforutoderajiobotanwo Xuan Zesurunihadousurebayoidesuka



HTML 形式では、開発者がユーザーが 1 つのオプションのみを提供または選択できるように制限する必要がある場合に、ラジオ ボタンが使用されます。ボタンをデフォルトで設定する目的は、ユーザーが選択できるオプションは 1 つだけであるため、ユーザーが必ず 1 つのオプションを選択するようにすることです。このブログでは、デフォルトでラジオ ボタンを選択する手順を段階的に説明します。

デフォルトでラジオボタンを選択するにはどうすればよいですか?

デフォルトでは「 チェック済み ”属性はラジオボタンの選択に利用されます。この属性が複数のラジオ ボタンで使用されている場合、デフォルトで最新のラジオ ボタンが選択されます。ステップバイステップのブログに従って、デフォルトでラジオ ボタンを選択します。

ステップ 1: ラジオボタンを作成する

HTML ファイルで、3 つのラジオ ボタンを作成し、ラベルを付けます。







< 中心 >

< h3 > 経験レベルを選択してください: < / h3 >

< ディビジョン >

< 入力 タイプ = '無線' ID = '初心者' 名前 = '経験' 価値 = '初心者' >

< ラベル ために = '初心者' > 初心者 < / ラベル >

< / ディビジョン >

< ディビジョン >

< 入力 タイプ = '無線' ID = '中級' 名前 = '経験' 価値 = '中級' >

< ラベル ために = '中級' > 中級 < / ラベル >

< / ディビジョン >

< ディビジョン >

< 入力 タイプ = '無線' ID = '前進' 名前 = '経験' 価値 = '前進' >

< ラベル ために = '前進' > 前進 < / ラベル >

< / ディビジョン >

< / 中心 >

上記のコード スニペットでは次のようになります。



  • ラジオボタンは単純な「 <入力> ” タグを追加し、そのタイプを「」に設定します 無線 ”。
  • 各ラジオボタンに「名前」、「ID」、「値」を割り当てます。
  • 最終的には「」を使用します。 ID 入力欄の「」を入力して「 <ラベル> ” タグを使用して” ために ' 属性。

スクリプトを実行すると、次のように出力されます。







この図は、ラジオ ボタンが表示されていますが、デフォルトではどれも選択されていないことを示しています。

ステップ 2: デフォルトで選択する

チェック済み ” 属性は、ラジオ ボタンを自動選択するために利用されます。オプションを 1 つだけ選択します。そのため、デフォルトで 1 つのラジオ ボタンを選択する方が良い方法です。これにより、ユーザーは正しいオプションを選択することが制限されます。



< ディビジョン >

< 入力 タイプ = '無線' ID = '初心者' 名前 = '経験' 価値 = '初心者' チェック済み>

< ラベル ために = '初心者' >初心者< / ラベル >

< / ディビジョン >

上記のコードでは、 チェック済み 属性が使用され、最初の入力フィールドにのみ割り当てられます。

上記のコードを実行すると、Web ページは次のようになります。

この出力は、ページが更新されるたびに最初のラジオ ボタンがデフォルトで選択されることを示しています。

おまけのヒント: JavaScript を使用してデフォルトでラジオ ボタンを選択する

JavaScript を使用してデフォルトでラジオ ボタンを選択するには、ID を使用してラジオ ボタンにアクセスします。次に、checked 属性を選択し、以下のコードのようにブール値を「true」に設定します。

< 脚本 >

document.getElementById ( '初心者' チェック済み = 真実;

< / 脚本 >

このコードでは、「 初心者 ” は、デフォルトで選択されているラジオ ボタンの ID です。

スクリプトをコンパイルすると、次のように出力されます。

上のスナップショットでは、JavaScript を使用して最初のラジオ ボタンがデフォルトで選択されています。

結論

ラジオボタンを選択するには、「 チェック済み ' 属性。 selected 属性が複数のラジオ ボタンで使用されている場合、ラジオ ボタンは最新の「checked」属性値を取得します。 JavaScript を使用してデフォルトでラジオ ボタンを選択するには、ID を使用してラジオ ボタンにアクセスします。このブログでは、デフォルトでラジオ ボタンを選択する方法を実証しました。