We have three buttons(English, Hindi & Urdu). How I can get the value of Selected button in JavaScript function?
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Urdu
</label>
</div>
Firstly set value to your radio buttons then get buttons and bind event listener.
and you can get value of button from event target as following:
let btns= document.getElementsByName("options");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",function(e) {
console.log(e.target.value);
});
}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked value="English">English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"value="Hindi">Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="Urdu">Urdu
</label>
</div>
Try This:
https://jsfiddle.net/f7ed1o0n/
$('input[name="options"]').change(function(){
alert($(this).val());
$(this).parents('.btn-group').find('input[type="radio"]').attr('disabled',
'disabled');
});
Related
when i click the active button a box should appear in the page , and when i click closed it should hide from page
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>
Use change event of radio button
$("input[name='options']").on('change',function(){
if($(this).attr('id') == 'option1'){
$('#myDiv').show();
}else{
$('#myDiv').hide();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px" id="myDiv">MY DIV WILL BE HERE</div>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>
is that what you want ?
$(document).ready(function() {
$('input[name=options]').change(function(e) {
var isOpen = $(this).val() == "Open";
$('#box').toggle(isOpen);
});
});
#box {
padding-top: 15px;
}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" value="Open" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" value="Closed" id="option2" autocomplete="off"> Closed
</label>
</div>
<div id="box">More Info</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can use a bootstrap modal and modal button to open a box on a button click. if you want to make a custom button then here is the code for in jquery.
$(document).ready(function()
{
$("button.active").on("click",function()
{
$(".page-box").toggle();
//page-box is the box container which you want to open
})
});
When I click option1, the showcontent will show hello 1, When I click option2, the showcontent will show hi 2, and more actions.I use JQuery to do this
$(document).ready(function() {
$("#option1").click(function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
However this code can't run, when I click the button, I should not use $(".option1").click(function(){, any ideas?
Updates: typo $(".option1").click(function(){ should be $("#option1").click(function(){
Alright, you're attempting to refer to the Options as .option1 and .option2. However, the dot there actually means a class such as if you defined
<input type="radio" name="options"class="option1" autocomplete="off" checked>
So, replace your .option1 or whatever with #option1. That should fix your problem.
However, the class .showcontent doesn't exist within your code. Maybe you would like to add a blank div with the class showcontent
The event handler doesn't work because you're selecting by class, yet the each radio control has an id.
To fix this, and make the code simpler, put a common class on all the radio buttons and change their value attributes to the text you want to show in showcontent. Then you can simply set the text() of that element, like this:
$(".option").click(function() {
$(".showcontent").text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" class="option" autocomplete="off" value="hello 1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" class="option" autocomplete="off" value="hi 2" /> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" class="option" autocomplete="off" value="foo 3" /> Radio
</label>
<div class="showcontent"></div>
Because you are selecting a class not an id here: $(".option1").click(function() {. but you don't have any element contain class call .option1. so try something like this:
$(document).ready(function() {
$("#option1").click(function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
<div class="showcontent"></div>
try using on click
$(document).ready(function() {
$(".option1").on("click",function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
Also if you want to attach it to the first option then use its ID in the selector
$(document).ready(function() {
$("#option1").on("click",function() {
var s = "hello 1";
$(".showcontent").text(s);
});
});
Also in html add the following in the html section inside body. This is because you are appending it to element with class showcontent on click
<div class="showcontent"></div>
I have two bootstrap button-group-toggle. Both options could be off, but only one could be on. If option1 is on, option2 should be off. If option2 is on, option1 should be off. Is it possible to do this?
HTML:
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option1">
<label class="btn btn-secondary" id="option1_on">
<input type="radio" name="options_option1" value="on"> On
</label>
<label class="btn btn-secondary" id="option1_off">
<input type="radio" name="options_option1" value="off"> Off
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option2">
<label class="btn btn-secondary" id="option2_on">
<input type="radio" name="options_option2" value="on"> On
</label>
<label class="btn btn-secondary" id="option2_off">
<input type="radio" name="options_option2" value="off"> Off
</label>
</div>
This is what I tried with javascript:
$(function() {
$("#option1 input:radio").change(function() {
var optionValue = $(this).val();
if (optionValue == 'on'){
//Option2 must be off
$("#option2_off").button('toggle');
}
});
$("#option2 input:radio").change(function() {
var optionValue = $(this).val();
if (optionValue == 'on'){
//Option1 must be off
$("#option1_on").button('dispose');
}
});
});
This does not work correctly.
Edit1
The answer does not work visualy on bootstrap 4 DEMO
You could select siblings of clicked element and find input with value off and set its checked value with jquery. It will also work for more then 2 groups DEMO
$(".btn-group-toggle input:radio").on('change', function() {
let val = $(this).val();
if (val == 'on') {
var sibling = $(this)
.parents('.btn-group-toggle')
.siblings()
.find('input[value="off"]')
.prop('checked', true)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option1">
<label class="btn btn-secondary" id="option1_on">
<input type="radio" name="options_option1" value="on"> On
</label>
<label class="btn btn-secondary" id="option1_off">
<input type="radio" name="options_option1" value="off"> Off
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option2">
<label class="btn btn-secondary" id="option2_on">
<input type="radio" name="options_option2" value="on"> On
</label>
<label class="btn btn-secondary" id="option2_off">
<input type="radio" name="options_option2" value="off"> Off
</label>
</div>
I am using knockout binding for radio button with bootstrap.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="true" name="daysradio" >{{texts.showAll}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="30" name="daysradio" >{{texts.showOnly30Days}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="60" name="daysradio" >{{texts.showOnly60Days}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="90" name="daysradio" >{{texts.showOnly90Days}}
</label>
<!--
<label class="btn btn-default">
<span style="cursor:pointer" data-bind="click: function(){ filterClick(30) } ,css: { 'selectedFilter' : filterValue == 30 }"><u>30 </u></span>
</label>
-->
</div>
the probelm is when i use data-toggle=buttons then data-bind is not working
but if i remove this then data-binding works.
but in that case radio button style comes but i need button styles.
Could you please suggest any solution?
I used the mentioned custom binding and it worked for me. The deatails custom binding will be found on this custom biding by Roy J
<div class="btn-group" data-bind="radio: userType">
<button type="button" class="btn btn-primary" data-value="company">Main User</button>
<button type="button" class="btn btn-primary" data-value="person">Dummy user</button>
In my html form I have two different types of input with same $scope variable as model.
I have 3 radio buttons and a number input field
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="16" name="options" id="option1" > 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="32" name="options" id="option2" > 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="64" name="options" id="option3" > 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
But if I select one of the radio button inputs, it doesn't set the value.
Having two different inputs for the same scope variable causes conflicts?
Use ng-value instead of value
Like this
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="16" name="options" id="option1"> 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="32" name="options" id="option2"> 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="64" name="options" id="option3"> 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
DEMO