input-radios via buttons, visual toggling behavior

Question

I'm using the following code to simulate input-radios with buttons :

<input id="blah" name="blah" type="hidden" value="true">
<div class="btn-group" data-toggle="buttons-radio">
   <button type=button data-toggle=button class="btn btn-primary" onClick="$('#blah').val(true);">Option1</button>
   <button type=button data-toggle=button class="btn btn-primary" onClick="$('#blah').val(false);">Option2</button>
</div>

It works perfectly, but there is slight problem. I can not set default Option. If I change class="btn btn-primary" to class="btn btn-primary active" on let say Option1 (to visually distinguish as default), the Toggling of the visual appearance of the buttons don't work any more i.e. once I click the opposite button they both stay visually active.

The problem is visual, internally the hidden field is set correctly, no problem with that.

How to make any of the buttons visually-default without breaking toggling visual behavior ?

sten sten · Accepted Answer · 2016-10-13T22:57:36

This worked out :

<input id="blah" name="blah" type="hidden" value="true">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active" onClick="$('#blah').val(true);" >
  <input id="p1" type=radio checked>Option1
</label>
<label class="btn btn-primary" onClick="$('#blah').val(false);">
  <input id="p2" type=radio >Option2 
</label>
</div>

input-radios via buttons, visual toggling behavior

1 Answers