I am trying to use the Twitter Bootstrap button group as an actual set of form input controls. By default, these button groups can be made to function like a radio button or checkbox group, but since they use the <button> element, they cannot actually be used like a radio button or checkbox.
In my research, I found this site which uses CSS to make these bootstrap buttons actually control radio buttons and checkboxes. The only issue is they use rather recent features of CSS to work, and therefore, require IE9 or above to work.
I would like to extend support to IE8. Is there another (perhaps JS controlled) solution which would offer the same features as the above link without the steep CSS requirements?
Thank you for your time.
Bootstrap 3 has a "native" solution...
There now is a "true" Bootstrap solution for this problem, which appears to work fine also on older browsers. Here's what it looks like:
// get selection
$('.colors input[type=radio]').on('change', function() {
console.log(this.value);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group colors" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" value="red" autocomplete="off" checked> Red
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="orange" autocomplete="off"> Orange
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
</label>
</div>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
See the relevant Bootstrap documentation for more information.
Bootstrap 4
Bootstrap 4 supports component the same way as Bootstrap 3, but Bootstrap 4 does not support IE9. You might want to check out the Bootstrap IE8 project.
Bootstrap 2
Try this fiddle
HTML:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>
Script:
$(".btn-group button").click(function () {
$("#buttonvalue").val($(this).text());
});
then get buttonvalue server side
With Bootstrap 3.2 put the hidden input in the middle of your button group container. Instead of the text content we take the value of th data-value field.
<div id="test" class="btn-group checkit" data-toggle="buttons-radio">
<button type="button" data-value="1" class="btn btn-default active">Yes</button>
<input type='hidden' name="testfield" value='1'>
<button type="button" data-value="0" class="btn btn-default ">No</button>
</div>
Now insert a little javascript snippet into the onload part of your template.
$('.checkit .btn').click(function() {
$(this).parent().find('input').val($(this).data("value"));
});
So you only need to add .checkit to your button group and insert a hidden input field.
With bootstrap 3.2 you can use button groups directly with radio- or checkbox-inputs
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" value="1" /> Yes
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="0" /> No
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" value="42" /> Whatever
</label>
</div>
See here:
http://jsfiddle.net/DHoeschen/gmxr45hh/1/
You can use hidden form elements and javascript to use the button state to trigger the form element states.
CSS-only solution:
HTML:
<div class="btn-group">
<label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
<label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
</div>
SCSS/LESS:
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
span {
display: block;
padding: 10px 15px;
}
input[type=checkbox] {
display: none;
}
input:checked + span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
JSfiddle here
If you don't want to add JS code you can use this pure CSS solution:
HTML:
<div class="btn-group colors">
<label class="btn btn-primary">
<input type="radio" name="g1" value="red" autocomplete="off" checked>
<span class='active'></span>
<span class='label'>RED</span>
<span></span>
</label>
<label class="btn btn-primary">
<input type="radio" name="g1" value="orange" autocomplete="off">
<span class='active'></span>
<span class='label'>ORANGE</span>
</label>
<label class="btn btn-primary">
<input type="radio" name="g1" value="yellow" autocomplete="off">
<span class='active'></span>
<span class='label'>YELLOW</span>
</label>
</div>
CSS:
input {
display:none;
}
input:checked + .active{
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:10;
}
.label{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
}
You may need to set a height and width for the buttons in CSS since the spans are positioned absolute.
See here JSFiddle example
Related
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
The div is not changing properties when I hover on the <input> of that div. It doesn't seem to work.
I want to hover over myclass div inputs and make myclass2 div visible.
How to do that ?
.myclass #that:hover+.myclass2 #this {
left: 100px;
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn"></input>
<input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
<span class="first"></span>
<span class="second"></span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2"></input>
<input class="logout4" type="button" value="Section2" id="myBtn3"></input>
<input class="logout5" type="button" value="Section3" id="myBtn4"></input>
<input class="logout6" type="button" value="Section4" id="myBtn5"></input>
<span class="third"></span>
<span class="fourth"></span>
</div>
.myclass2{
display:none;
}
.myclass:hover+.myclass2{
display:block;
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn">
<input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
<span class="first"></span>
<span class="second"></span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2">
<input class="logout4" type="button" value="Section2" id="myBtn3">
<input class="logout5" type="button" value="Section3" id="myBtn4"
<input class="logout6" type="button" value="Section4" id="myBtn5">
<span class="third"></span>
<span class="fourth"></span>
</div>
This works - you need position
HOWEVER you cannot click the new buttons - so see second example
#this { position:absolute; width: 300px }
#that:hover + #this {
right: 100px
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn" />
<input class="logout2" type="button" value="Section Wise" id="myBtn1" />
<span class="first">First</span>
<span class="second">Second</span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2" />
<input class="logout4" type="button" value="Section2" id="myBtn3" />
<input class="logout5" type="button" value="Section3" id="myBtn4" />
<input class="logout6" type="button" value="Section4" id="myBtn5" />
<span class="third">Third</span>
<span class="fourth">Fourth</span>
</div>
I THINK you mean this:
/*
$("#myBtn").on("click",function() {
$("#this").toggle()
})
*/
$("#myBtn").on("mouseenter",function() {
$("#this").show();
})
$("#myBtn").on("mouseleave",function() {
setTimeout(function() { $("#this").hide(); },3000);
})
#this { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn" />
<input class="logout2" type="button" value="Section Wise" id="myBtn1" />
<span class="first">First</span>
<span class="second">Second</span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2" />
<input class="logout4" type="button" value="Section2" id="myBtn3" />
<input class="logout5" type="button" value="Section3" id="myBtn4" />
<input class="logout6" type="button" value="Section4" id="myBtn5" />
<span class="third">Third</span>
<span class="fourth">Fourth</span>
</div>
If you just wan't to make your that div visible when you hover this.
Then you can use visibile properties, can be managed with css or jquery method.
Css method
#that:hover + #this{
visibility : visible;
}
#this{
visibility : hidden;
}
Jquery method
Something like :
$('#this').hide();
$('#that').hover(function(event){
$('#this').show();
});
I would remove the classes or the ids (or keep them if you need them for something else...) however here is an SCSS that can solve this issue for you:
Here, I removed the classes, but as I mentioned above, you can keep the classes and remove the Ids or keep them both :)
#this {
display: none;
}
#that {
&:hover {
+ {
#this {
display: block;
}
}
}
}
I have simple radio button, using bootstrap like this
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
So what i want really to do is, when i click the radio, the span class is change from btn-danger into btn-success. Of course previous button that has btn-success is would be back into btn-danger again. I try with my javascript code but it wouldn't work out.
$(document).ready(function() {
$("label").click(function() {
if ($(this).children().children().is(":checked")) {
$(this).children().attr("class", "btn btn-success");
} else {
$(this).children().attr("class", "btn btn-danger");
}
});
});
Ok when I click the radio it turned in to green (btn-success), but when i check another radio, it turned in to green but previous radio which i click it, it still green (still has btn-success class). Can someone help me? Thanks :)
You also need to remove/add the proper CSS class from unckecked radio's parent element element.
Also .addClass() and .removeClass() can be used to add and remove the CSS class. Here in the example I have also used .filter()
$(document).ready(function() {
$("label").click(function() {
//Cache elements
var radioElem = $(":radio[name=tipe]");
//Remove the btn-success and add btn-danger class to all the parent element of radio
radioElem.parent().removeClass('btn-success').addClass('btn-danger');
//Filter out checked radio and add/remove the classes
radioElem.filter(":checked").parent().addClass('btn-success').removeClass('btn-danger');
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
On change of any radio button iterate loop through all the radio buttons and check whether the radio button is checked or not and accordingly made change the classes of the parent div. Please refer the below snippet for more understanding.
$("input[type='radio']").on("change",function(){
$("input[type='radio']").each(function(){
if($(this).is(':checked')){
$(this).parent().removeClass('btn-danger').addClass('btn-success');
}else{
$(this).parent().removeClass('btn-success').addClass('btn-danger');
}
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label for="radio-A">
<span class="btn btn-danger">
<input id="radio-A" type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label for="radio-B">
<span class="btn btn-danger">
<input id="radio-B" type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label for="radio-C">
<span class="btn btn-danger">
<input id="radio-C" type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
You are only checking the children of the clicked button and set or rest that one. But you have to reset the children of the buttons that have not been clicked in order to make them red again.
You could do something like
$(document).ready(function() {
$("label").click(function() {
$("label").children().attr("class", "btn btn-danger"); // reset all
$(this).children().attr("class", "btn btn-success"); // set current
});
});
It is very simple
if(!$('[name="tipe"][value="str"]').is(':checked')) {
alert("it's not checked");
}
Try this code,
$(document).ready(function() {
$('label').click(function() {
$('label').find('span').attr('class','btn btn-danger');
if ($(this).find('input:checked')) {
$(this).find('span').attr('class','btn btn-success');
}
});
});
Thanks!
You can just replace above jQuery code with below code
$(document).ready(function() {
$("label").click(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
} else {
$('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
}
});
});
Okay I understand that the JavaScript is not being applied to the entire group because each button is part of a different group, but the documentation says this is the proper way to use justified with the button tag. This would not be an issue except I need them to be justified.
So my question is: how am I supposed to use JavaScript on all three buttons as a whole? It should operate as a simple radio button group.
Click one and the others are unselected. Any advice would be great!
HTML:
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group">
<button type="button" class="btn btn-default">Low Cost/Effeciency</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default active">Average</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">High Cost/Effeciency</button>
</div>
</div>
JavaScript:
$(function() {
$('body').on('click', '.btn-group button', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
//other things I need to do
})
});
The button elements are not sibling elements.
You need to select the parent element's sibling elements.
Working Example Here
$(document).on('click', '.btn-group button', function (e) {
$(this).addClass('active').parent().siblings().find('button').removeClass('active');
});
However, the proper way to do this is to use the attribute data-toggle="buttons".
In doing so, you don't need to write any custom JS. For more information, see this old answer of mine explaining how it works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-justified" data-toggle="buttons" role="group" aria-label="...">
<label class="btn btn-default">
<input type="radio" name="options" />Low Cost/Effeciency
</label>
<label class="btn btn-default">
<input type="radio" name="options" />Average
</label>
<label class="btn btn-default">
<input type="radio" name="options" />High Cost/Effeciency
</label>
</div>
I am having trouble detecting a button click using Node.js, Bootstrap and Jade.
I have the following Jade code but I am not seeing the log from the onclick method and there is no change to the button. So the method never gets called.
extends layout
block content
.jumbotron
.container
h1= title
p Enter the url of the file to be sent
form#formInputURL(name="chooser",method="post",action="/chooser",)
input#inputURL(type="text", placeholder="insert url", name="chooseurl")
button#btnSubmit(type="submit") submit
p
.btn-group(data-toggle='buttons')
label.btn.btn-primary.active
input#option1(type='checkbox', autocomplete='off', checked='')
| Radio 1 (preselected)
|
label.btn.btn-primary
input#option2(type='checkbox', autocomplete='off')
| Radio 2
|
label.btn.btn-primary
input#option3(type='checkbox', autocomplete='off')
| Radio 3
script.
$('#option2').on('click', function () {
console.log("clicked")
$(this).button('toggle')
})
your code is working fine,
make sure you're clicking on the right element (checkbox).
have a look at this example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h1></h1>
<p>Enter the url of the file to be sent</p>
<form id="formInputURL" name="chooser" method="post" action="/chooser">
<input id="inputURL" type="text" placeholder="insert url" name="chooseurl" />
<button id="btnSubmit" type="submit">submit</button>
<p></p>
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-primary active">
<input id="option1" type="checkbox" autocomplete="off" checked="" /> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input id="option2" type="checkbox" autocomplete="off" /> Radio 2
</label>
<label class="btn btn-primary">
<input id="option3" type="checkbox" autocomplete="off" /> Radio 3
</label>
</div>
</form>
</div>
</div>
<script>
$('#option2').on('click', function() {
alert("clicked")
})
</script>
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.