web-dev-qa-db-ja.com

チェックされているようにラジオボタンに初期値を割り当てます

最初にHTMLでチェックされているラジオボタンの値を割り当てるにはどうすればよいですか？

htmlradio-button
130
Rinkal Bhanderi

これにはchecked属性を使用できます。

<input type="radio" checked="checked">
154
polarblau

あなただけを使用することができます：

<input type="radio" checked />

値を指定せずにチェックされた属性のみを使用することは、checked="checked"と同じです。

53
seedg

この質問の複製としてマークされた同様の質問にこの回答を掲載しました。答えはかなりの人を助けてくれたので、念のためここにも追加したいと思いました。

これは質問に正確には答えませんが、これを達成しようとするAngularJSを使用している人にとっては、答えはわずかに異なります。そして実際には、通常の答えは機能しません（少なくとも私にとっては機能しませんでした）。

あなたのhtmlは通常のラジオボタンに非常に似ています：

<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second

コントローラーで、ラジオボタンに関連付けられているmValueを宣言します。これらのラジオボタンのいずれかを事前に選択するには、グループに関連付けられた$scope変数を目的の入力値に割り当てます。

$scope.mValue="second"

これにより、ページのロード時に「2番目」のラジオボタンが選択されます。

13
discodane

これは、Angular2（2.4.8）ソリューションを探している人にとっては、検索時に一般的に人気のある質問です。

<div *ngFor="let choice of choices">
  <input type="radio" [checked]="choice == defaultChoice">
</div>

これにより、条件が与えられた場合にchecked属性が入力に追加されますが、条件が失敗した場合は何も追加されません。

しないこれを行う：

[attr.checked]="choice == defaultChoice"

これは、属性checked="false"を他のすべての入力要素に追加するためです。

ブラウザはchecked属性（key）の存在のみを探すため、その値を無視するため、グループ内の最後の入力チェックされます。

3
msanford

特に、angularjsを使用している場合、ラジオボタンでデフォルトのチェックを設定する別の方法は、「ng-checked」フラグを「true」に設定することです。例：<input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

checked = "checked"は私にとってはうまくいきませんでした。

2
Deepika Pethaperumal

同じ「name」属性を持つ2つのラジオボタンがあり、「required」属性がある場合、「checked」属性を追加してもチェックされないことに注意してください。

例：これにより、両方のラジオボタンがオフのままになります。

<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />

これにより、「男性」ラジオボタンがチェックされます。

<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />
2
YZ Zhe

パーティーに少し遅れて、OPがhtmlを言ったことを知っていますが、MVCでこれを行う必要がある場合は、3番目のパラメーターでtrueを設定できます。

例えば：

    <p>Option One :@Html.RadioButton("options", "option1", true})</p>
    // true will set it checked

     <p>Option Two :@Html.RadioButton("options", "option2"})</p>
     //nothing will leave it unchecked
1
user2903379

アプリケーションにreact-reduxを使用していて、reduxストアにあるデータを表示する場合は、以下のように「チェック済み」オプションを設定できます。

<label>Male</label>

 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "0"}
 />



 <label>Female</label>
 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "1"}
 />
0
Ruks