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>
Related
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');
});
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
})
});
I am building a simple vehicle inspection form and I would like to use checkboxes as buttons to capture true/false values.
This is supposed to be trivial using Bootstrap 4.
I would however like to adjust the default behaviour of the buttons; to toggle between the success and danger classes to denote true/false. And also in some cases to change the text of the button, eg. "Leaks" -> "No Leaks".
I have got the toggle working with the help of #Yass but I am not getting the correct true/false values when I submit the form. Even though the checkboxes are checked (true), the values are coming through as if they are false.
I'm not sure how to handle the change in text when toggling between the two states.
Checkbox Buttons
HTML
<div class="row">
<div class="col-sm-4 col-xs-12">
<p class="font-weight-bold">Bonnet</p>
<div data-toggle="buttons">
<label class="btn btn-block btn-success">
<input type="checkbox" name="oil" checked="checked" autocomplete="off"> Oil
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="coolant" checked="checked" autocomplete="off"> Coolant
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="breakfluid" checked="checked" autocomplete="off"> Break Fluid
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="screenwash" checked="checked" autocomplete="off"> Screen Wash
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="noleaks" checked="checked" autocomplete="off"> No Leaks
</label>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<p class="font-weight-bold">Outside</p>
<div data-toggle="buttons">
<label class="btn btn-block btn-success">
<input type="checkbox" name="tyres" checked="checked" autocomplete="off">
Tyres
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="wiperblades" checked="checked" autocomplete="off">
Wiper Blades
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="lights" checked="checked" autocomplete="off">
Lights
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="indicators" checked="checked" autocomplete="off">
Indicators
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="outcleanliness" checked="checked" autocomplete="off">
Cleanliness
</label>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<p class="font-weight-bold">Inside</p>
<div data-toggle="buttons">
<label class="btn btn-block btn-success">
<input type="checkbox" name="horn" checked="checked" autocomplete="off">
Horn
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="breaks" checked="checked" autocomplete="off">
Breaks/Handbrake
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="seatbelt" checked="checked" autocomplete="off">
Seatbelt
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="windscreen" checked="checked" autocomplete="off">
Windscreen
</label>
<label class="btn btn-block btn-success">
<input type="checkbox" name="incleanliness" checked="checked" autocomplete="off">
Cleanliness
</label>
</div>
</div>
</div>
JavaScript
$('label.btn').on('click', function() {
//Find the child check box.
var $input = $(this).find('input');
$(this).toggleClass('btn-danger btn-success');
//Remove the attribute if the button is "disabled"
if ($(this).hasClass('btn-danger')) {
$input.removeAttr('checked');
} else {
$input.attr('checked', '');
}
return false; //Click event is triggered twice and this prevents re-toggling of classes
});
https://jsfiddle.net/mstnorris/9fyzfu8w/
Here is an alternative solution with pure Javascript. Add a hidden input associated to each button, and update hidden values each time the button is clicked.
HTML :
<!-- Visible button -->
<input onclick="toogleButton(this,'hiddenButton')" class="btn btn-secondary" type="button" value="Toogle">
<!-- Hidden input -->
<input name="FM_city" id="hiddenButton" type="hidden" value="0"></input>
Javascript :
// Called when the button is clicked
function toogleButton(callingElement,hiddenElement)
{
// Check the color of the button
if (callingElement.classList.contains('btn-secondary'))
{
// If the button is 'unset'; change color and update hidden element to 1
callingElement.classList.remove('btn-secondary');
callingElement.classList.add('btn-success');
document.getElementById(hiddenElement).value="1";
}
else
{
// If the button is 'set'; change color and update hidden element to 0
callingElement.classList.remove('btn-success');
callingElement.classList.add('btn-secondary');
document.getElementById(hiddenElement).value="0";
}
}
When the form is submitted, process value of the hidden input. Note that you can easily change the text of the button with : callingElement.value="New text here"
Last remark : initial value of hidden elements must be in accordance with the initial color of the associated button.
Handle the click event of the buttons, and toggle the checked value of the input using jQuery .prop() like this..
var $chk = $(this).find('[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
Demo: http://codeply.com/go/IeuO1fPf7H
i'm trying to loading data to a page,
server send a value to browser, for example "male". i did try
$("#optGender").val("male");
to activated/checked radio button I am Male, but it doesnt works
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-danger active">
<input type="radio" name="optGender" value="male" checked=""> I am MALE
</label>
<label class="btn btn-danger">
<input type="radio" name="optGender" value="female"> I am FEMALE
</label>
</div>
</div>
$("#optGender").prop('checked',"male");
You have no id attribute. Try this
$("input[name=optGender][value=male]").prop("checked", true)
or
$('input[name=opt_gender]').val(['male']);
http://jsfiddle.net/Stafox/8qhfnrxe/1/
I'm using the javascipt radio button from Bootstrap 3
http://getbootstrap.com/javascript/#buttons
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Javascript:
$('.btn').button()
I need to append this only when ".btn" has class "active":
<span class="glyphicon glyphicon-ok"></span>
to obtain
<label class="btn btn-primary active">
<span class="glyphicon glyphicon-ok"></span><!-- appended markup -->
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
Can anyone help?
Thank you
How about just do it in plain 'ole CSS like this:
CSS:
.add-check .active:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e013";
}
HTML: (I only added a class .add-check to the button group so you can target specific ones).
<div class="btn-group add-check" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
DEMO
You know, just to throw a pure CSS solution into the mix for the heck of it:
.active-display-only { display:none; }
.active > .active-display-only { display:inline-block; }
Then, put the glyphicon in each button:
<label class="btn btn-primary">
<span class="glyphicon glyphicon-ok active-display-only"></span>
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
You can add in some jQuery magic to make this do what you want it to do. I did this by just adding the below element in your HTML, but with the hide class to keep it hidden until it is needed.
HTML:
<label id="tester" class="btn btn-primary active">
<span id="test" class="glyphicon glyphicon-ok hide"></span>
<input type="radio" name="options" class="option1" checked>Option 1 (preselected)
</label>
jQuery:
$('#tester').on('click', function () {
$('#test').removeClass('hide');
$('#test2').addClass('hide');
$('#test3').addClass('hide');
});
Where, on click the label, the span will remove the hide class, thus showing the check mark while adding the class to the other two inputs. This should work for you, and I would advise changing the name scheme around as well. An example is found below.
DEMO
EDIT
I updated the fiddle so that the pre-selected option will automatically start with a check mark, hopefully creating the experience you are looking for.