#1が機能する場合、#2が機能しない場合。以下のコードを確認してください。
<div class="container">
<div class="row">
<h1>Radio Group #1</h1>
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"> 1
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio3" value="option3" type="radio"> 3
</label>
</div>
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name="year" value="2011" type="radio">2011
</label>
<label class="btn btn-default">
<input name="year" value="2012" type="radio">2012
</label>
<label class="btn btn-default">
<input name="year" value="2013" checked="checked" type="radio">2013
</label>
</div>
</div>
</div>
ここで実際に動作を確認できます: http://bootply.com/84165
デフォルトのボタンをチェックしたいとします。
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="year" value="2011">2011
</label>
<label class="btn btn-default">
<input type="radio" name="year" value="2012">2012
</label>
<label class="btn btn-default active">
<input type="radio" name="year" value="2013" checked="">2013
</label>
</div>
</div>
デフォルトにしたいボタン(active
タグ)にlabel
クラスを追加し、input
タグにchecked=""
を追加して、デフォルトでフォームに送信されるようにします。
チェック済み入力の親であるすべてのラベルに「アクティブ」クラスを適用するJavaScriptの修正:
$(':input:checked').parent('.btn').addClass('active');
直後に挿入
$('.btn').button();
上記のように機能させるには、ラベルでactiveを使用する必要があります。ただし、checked = "checked"を使用することもできます。これも機能します。必ずしも必要ではありませんが、HTML形式に準拠しているため、読みやすく、より理にかなっています。
active class with labelを使用して、自動選択してchecked=""
を使用します。
<label class="btn btn-primary active" value="regular" style="width:47%">
<input type="radio" name="service" checked="" > Regular </label>
<label class="btn btn-primary " value="express" style="width:46%">
<input type="radio" name="service"> Express </label>