Develop Reference

Bootstrap button toggle group submitting both options with form

The following is a part of a form that is submitted created using bootstrap. The goal here is to create an option group; selecting one option should unselect (or "turn off") the other.
html:
<div class="col btn-group btn-group-toggle form-group" role="radiogroup" data-toggle="buttons">
<label class="btn btn-outline-success active"> <input id="create_option_activated" type="radio" name="create_option_activated" autocomplete="off" /> Activated </label>
<label class="btn btn-outline-danger"> <input id="create_option_deprecated" type="radio" name="create_option_deprecated" autocomplete="off" /> Deprecated </label>
</div>
Messing around with the options a bit I noticed that when I click both buttons, both stay selected when I submit the form. Here is the form submission:
{
"create_option_activated": "on",
"create_option_deprecated": "on",
}
I would like only one option to be selected. Do I need to use javascript/jquery to achieve this or is there just something wrong with my html?

The values of the name attribute for a group of radio buttons must be the same. This is how radio buttons work.
But this situation can be circumvented by writing a little jquery logic that disables the label for all radio buttons except the current one.
let classesSet = '.col.btn-group.btn-group-toggle.form-group';
$(classesSet + ' input[type=radio]').on("change", function () {
$(classesSet + ' input[type=radio]').not(this).prop('checked', false);
console.log($(this).attr('name'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col btn-group btn-group-toggle form-group" role="radiogroup" data-toggle="buttons">
<label class="btn btn-outline-success active"> <input id="create_option_activated" type="radio" name="create_option_activated" autocomplete="off" /> Activated </label>
<label class="btn btn-outline-danger"> <input id="create_option_deprecated" type="radio" name="create_option_deprecated" autocomplete="off" /> Deprecated </label>
</div>

jquery not catching selector of input by name

I'm trying to toggle between 2 divs and I can't even get through the first challenge... to catch the radiobutton click event with jQuery selector.
$("input[name='radio_btn_options']").on("click", function(){
debugger;
alert("1234");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" style="margin:15px" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="radio_btn_options" id="diagramRB" autocomplete="off" checked> Diagram
</label>
<label class="btn btn-secondary">
<input type="radio" name="radio_btn_options" id="listRB" autocomplete="off"> List View
</label>
</div>
I don't get no error message no nothing. Nothing just happens have i done something wrong??

Radio button with accordion, radio button selected doesn't change

I am creating a radio buttons which pressed will open up an accordion with details. I have figured out the creation of the accordion. But the selected/checked radio doesn't change when I press the other buttons, but their accordion does open up but the selection remains as the first one. I have taken the first one as the default selection initially.
When I didn't implement the accordion, I was able to change selections between the radio buttons.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div class="container-fluid bg-default" id="rides">
</div>
<div class="col-md-6 col-md-offset-3 ">
<fieldset >
<div id = "accordion">
<div class="radio">
<input type="radio" name="ride_id" id="radio1" value="1" checked = "checked">
<label class="btn-list btn-block btn-xl" for="radio1">
<span class="col-sm-5">Los Angeles </span>
<span class="col-sm-2"><i class="fa fa-arrows-h"></i></span>
<span class="col-sm-5">Las Vegas</span>
</label>
</div>
<div>Details of route 1</div>
<div class="radio">
<input type="radio" name="ride_id" id="radio2" value="2">
<label class="btn-list btn-block btn-xl" for="radio2">
<span class="col-sm-5">Los Angeles</span>
<span class="col-sm-2"><i class="fa fa-arrows-h"></i></span>
<span class="col-sm-5">San Francisco</span>
</label>
</div>
<div>Details of route 2</div>
<div class="radio">
<input type="radio" name="ride_id" id="radio3" value="3">
<label class="btn-list btn-block btn-xl" for="radio3">
<span class="col-sm-5">Los Angeles</span>
<span class="col-sm-2"><i class="fa fa-arrows-h"></i> </span>
<span class="col-sm-5">Sacramento</span>
</label>
</div>
<div>Details of route 3</div>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<div class="col-lg-8 col-lg-offset-2 text-center">
<a onclick="" href='#register' class="btn btn-primary btn-xl btn-block page-scroll">Book</a>
</div>
</div>
</fieldset>
</div>
</div>

The problem does seem to be that by attaching the accordion click events are no longer reaching the radio buttons. You can get around this by saving the radio button when its clicked and checking it when the animation is over.
$(function() {
var inputClicked;
$( "#accordion" ).accordion({
beforeActivate: function(evt, ui){
inputClicked = $('input', evt.currentTarget)
//$('input', evt.currentTarget).prop("checked", "checked");
},
activate: function(evt, ui){
inputClicked.prop("checked", "checked");
}
});
});
Running example at http://jsfiddle.net/hw4vx3cy/1/

I guess you need to change your jquery. Perform the following steps:
First, know which radio button is clicked.Declare a same class class ="radio_class" for all your radio buttons, and use .change function to detect for changes.
Uncheck all radio buttons (or uncheck previously checked radio button)
Check the clicked radio button and run accordion.
Visit the following link:
jQuery check/uncheck radio button onclick
Refer to the answer given by Jurrie.

Get Bootstrap Buttons Value on click

I have a form with multiple bootstrap buttons. When the user clicks on the button I want to refine results.
The issue I have is trying to get the value of the button**s** clicked in the javascript function that is called to refine the results.
The code for the buttons is below
<div class="row">
<div class="col-md-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="btnPublic" checked> Public Questions
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="btnPrivate"> Private Questions
</label>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="btnQuestionsForMe" checked> Questions For Me
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="btnQuestionsIAsked"> Questions I Asked
</label>
</div>
</div>
</div>
How do I get the value of the two separate buttons via javascript in the same function.

In your example you will only ever be able to have one radio button checked, since all of your radio button names are called "options". If you want the user to be able to select two of the four radio buttons you will need to change the names of the radio buttons you want to be grouped together. I have put together a nice JsFiddle example for you that does what you are asking.
You will need to attach a change event to each radio button so you know when buttons are checked. Example:
$("#btnQuestionsForMe").change(function(){
doSomethingWithCheckedRadio()
});
Here is the javascript code using jquery to get all of the checked radio buttons:
function getCheckedRadios(){
var checkedIds = [];
$("input[type='radio']").each(function(i, obj){
if($(this).prop("checked")){
checkedIds.push($(this).attr("id"));
}
});
return checkedIds;
}
Hope this helps!

Bootstrap radio button with function

What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks

I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.