I have the next boostrap radio-button:
<div class="btn-group" id="filterDay" data-toggle="buttons">
<label class="btn btn-default blue">
<input type="radio" class="toggle" value="1">Monday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" value="2"> Tuesday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" value="3"> Wednesday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" value="4"> Thursday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" value="5"> Friday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" value="6"> Saturday
</label>
<label class="btn btn-default blue active">
<input type="radio" class="toggle" value="0"> Sunday
</label>
</div>
I'm trying to get value of the active button when I submit the form, without creating an "onclick" event, simply getting the active button from the $('#filterDay') button group. Should be easy but I'm not finding a way to get the value. I tried several examples but any worked.
Could someone help?
Thank you!
Update:
This is the html "printed" code:
<label class="btn btn-default blue">
<input type="radio" class="toggle" value="6"> Saturday
</label>
<label class="btn btn-default blue active">
<input type="radio" class="toggle" value="0"> Sunday
</label>
The "active" in the class is what is changing when I click the button.
In the form submit handler use the :checked selector
var filterDay = $('#filterDay input:radio:checked').val()
You should set a common "name" to identify the form:
<div class="btn-group" id="filterDay" data-toggle="buttons">
<label class="btn btn-default blue">
<input type="radio" class="toggle" name="toggle" value="1">Monday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" name="toggle" value="2"> Tuesday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" name="toggle" value="3"> Wednesday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" name="toggle" value="4"> Thursday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" name="toggle" value="5"> Friday
</label>
<label class="btn btn-default blue">
<input type="radio" class="toggle" name="toggle" value="6"> Saturday
</label>
<label class="btn btn-default blue active">
<input type="radio" class="toggle" name="toggle" value="0"> Sunday
</label>
</div>
And to get the value, you can get like this:
$('input[name=toggle]:checked').val()
Try this out, It should solve your problem.
$( "input:checked" ).val()
you can refer the link below for more details:
http://api.jquery.com/checked-selector/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With