Develop Reference

jQuery - Click checkbox add class and remove class

I am using bootstrap to create a checkbox and I want to create a checkbox that clicks on all checkboxes and vice versa (I know there are a lot of guides in stackoverflow about this) but in all it only works on the inputs.
In this case I am enclosing the input with a label "label", when activating the checkbox bootstrap automatically adds the "active" class to this tag that causes the "check" to appear. When I tried to implement scripts found here that added the "checked" attribute to the input of the checkbox, they did not work for this very reason so I tried the following:
$('label#seleccionartodos').click(function(){
$('input.videoscheck').prop('checked', true).parent().addClass('active');
});
And this is my html:
<div class="form-group" data-toggle="buttons">
<label for="selectall">SELECT / UNSELECT ALL:</label>
<label class="btn btn-success" id="seleccionartodos">
<input type="checkbox" id="selectall" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
<div class="form-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" class="videoscheck" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
<div class="form-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" class="videoscheck" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
<div class="form-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" class="videoscheck" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
This works halfway, when I click the checkbox, add the "checked" attribute to all the checkboxes with the ".videoscheck" class and also adds the "active" class to the parent tag that encloses them.
But since I'm not good with jQuery, I do not know how to do it so that when I click it again, all other checkboxes will be deselected (that is, the opposite of the initial action).
Here's a Fiddle showing what I'm exposing.

$('label#seleccionartodos').click(function(){
$('input.videoscheck').prop('checked', $(this).children('input').is(':checked'))
.parent().toggleClass('active');
});
But I prefer this way: (you already bound label to checkbox, so you can deal with change event of checkbox)
$('#selectall').on('change', function() {
$('input.videoscheck').prop('checked', $(this).is(':checked')).parent().toggleClass('active');
});

I think it's better to bind a change event on the checkbox itself:
$('input#selectall').change(function(){
if (this.checked) {
$('input.videoscheck').prop('checked', true).parent().addClass('active');
} else {
$('input.videoscheck').prop('checked', false).parent().removeClass('active');
}
});

jQuery has a toggleClass function:
$('div').click(function() {
$(this).toggleClass('active');
}

How to know that radio button is not checked?

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');
}
});
});

How to apply JavaScript to bootstrap btn-group-justified to select/unselect the children button elements

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>

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.

twitter bootstrap button toggle does not work

i have the bootstrap-button.js and have this markup, but when i click on the button, it does not toggle it to show that it has been clicked. any tips as to what is missing?
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" data-toggle="button"> 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" data-toggle="button"> 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" data-toggle="button"> Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
second part of the question is how to get the data into javascript as to which button was clicked? if 1Fail was clicked, it should toggle and js code to detect that 1Fail was clicked. Thanks in advance.

The problem seems to be that you added data-toggle="button" to every check button, which is not necessary. Because you already have data-toggle="buttons-checkbox" in the outer div element .
So change it to look like this:
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" > 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" > 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" > Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
EDIT:
Sorry, I didn't notice your second question. When a button is clicked an active class will be added to it, so you can detect this with jQuery's hasClass method.