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');
}
Related
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>
I have a check box and I want to check and uncheck based on a variable.
Bellow is the code for check box. I am using Bootstrap check box.
<div class="row">
<div class="col-sm-2">
<label class="control-label" for="pwd">My Check-Box:</label>
</div>
<div class="col-sm-1">
<span class="button-checkbox">
<input type="checkbox" class="hidden" id="myCheckBox"/>
<button id="myCheckBoxButton" type="button" class="btn-chk" data-color="success" ></button>
</span>
</div>
</div>
When the check-box is checked and unchecked,it look like bellow
Checked
Unchecked
I tried multiple ways to check and uncheck the check box.
this is what, I tried
$('#myCheckBox').prop('checked',true);
$('#myCheckBox').attr("disabled", false);
$('#myCheckBox').attr("disabled", "true");
$('#myCheckBoxButton').prop('checked',true);
$('#myCheckBoxButton').attr("disabled", false);
$('#myCheckBoxButton').attr("disabled", "true");
Nothing works for me.
It works if I am using normal check box.
After that I debug the code using firebug.
Here I see the code When checkBox is checked.
<input id="myCheckBox" class="hidden" type="checkbox" checked="checked">
<button id="myCheckBoxButton" class="btn-chk btn-success active" data-color="success" type="button">
<i class="state-icon glyphicon glyphicon-check"></i>
</button>
Now I tried This.
because check-box is a button so I thought lets change the class.
Suppose flag is a variable in Which check box check and uncheck depends on.
if (flag == '0') {
$('#myCheckBox').attr('checked', false);
$("#myCheckBoxButton").addClass("btn-chk btn-default-chk");
} else {
$("#myCheckBoxButton").removeClass("btn-chk btn-default-chk");
$("#myCheckBoxButton").removeClass("state-icon glyphicon glyphicon-unchecked");
$("#myCheckBoxButton").addClass(" glyphicon glyphicon-check");
$("#myCheckBoxButton").addClass("btn-chk btn-success active");
}
Now I am able to check, but it looks weird.
When I debug using fire bug I saw That changes in the code.
<input id="myCheckBox" class="hidden" type="checkbox">
<button id="myCheckBoxButton" class="glyphicon glyphicon-check btn-chk btn-success active" data-color="success" type="button">
<i class="state-icon glyphicon glyphicon-unchecked"></i>
</button>
I can see clearly there is an extra class added in button
<button id="myCheckBoxButton" class="glyphicon glyphicon-check btn-chk btn-success active" data-color="success" type="button">
How do I fix this can one help with this.
Look here. It is working fine. Or are you trying something else?
var flag = 0;
if (flag == '0') {
$('#myCheckBox').prop('checked', true);
$("#myCheckBoxButton").addClass("btn-chk btn-default-chk");
} else {
$("#myCheckBoxButton").removeClass("btn-chk btn-default-chk");
$("#myCheckBoxButton").removeClass("state-icon glyphicon glyphicon-unchecked");
$("#myCheckBoxButton").addClass(" glyphicon glyphicon-check");
$("#myCheckBoxButton").addClass("btn-chk btn-success active");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-2">
<label class="control-label" for="pwd">My Check-Box:</label>
</div>
<div class="col-sm-1">
<span class="button-checkbox">
<input type="checkbox" class="hidden" id="myCheckBox" />
<button id="myCheckBoxButton" type="button" class="btn-chk" data-color="success" ></button>
</span>
</div>
</div>
As you can see there, it works fine based on flag variable, it is unchecking and checking.
It is posible to change class name. visit this link
http://api.jqueryui.com/switchclass/
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!
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.
In my Django app, I would like to use Twitter bootstrap radio buttons. Then I would like to post the value of those buttons in order to create an object.
Here is my buttons:
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match">
I would like to get the information from those radio button and create an object match with it in a view:
def test(request):
user=request.user
if request.method == 'POST':
style = request.POST['style']
supporting = request.POST['supporting']
match = Match.objects.create(user=user, style=style, supporting=supporting)
return HttpResponse(test)
The thing is that I don't know JavaScript well, so I didn't find how to get the value from the button.
Then, I think I have to use:
$.post('/sportdub/points_dub/', {'style': style , 'supporting': supporting});
But how can I do so that style and supporting correspond to the value of the buttons, and then to post it only when the user clicks on the button?
Thank you very much for your help.
taking my last answer, let's use your own code... in your HTML you have something like:
<form action="/sportdub/points_dub/" method="post" class="form-horizontal">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
and you just have to add one hidden field per block, in your case, add 2. Your form would then match:
<form action="/page" method="post" class="form-horizontal">
<input type="hidden" id="supporting_team" value="" />
<input type="hidden" id="supporting_type" value="" />
<div class="btn-group supporting_team" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib supporting_type" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
add a jQuery helper that will set the values of those hidden fields upon buttons click:
// whenever a button is clicked, set the hidden helper
$(".supporting_team .btn").click(function() {
$("#supporting_type").val($(this).text());
});
$(".supporting_type .btn").click(function() {
$("#supporting_team").val($(this).text());
});
when you click the create your match the entire form will be posted to the page set as the action attribute of the form, you have to do nothing more...
If you want to submit it manually by invoking post in javascript you need to remember to prevent the form to be submitted again as that's the input type="submit" element task, you can invoke your post and serializing the entire form data, instead one by one as in your example...
like:
// when the form is submited...
$("form").submit(function() {
// submit it using `post`
$.post('/sportdub/points_dub/', $("form").serialize());
// prevent the form to actually follow it's own action
return false;
});
in your dynamic code, you will have those variables as:
supportingTeam = request.POST['supporting_team']
supportingType = request.POST['supporting_type']
and this, will be valid, no matter if you have the manually form submit script or not...
After your most recent comment, I think you should try using the input radio buttons provided in HTML. It is very easy to do button groupings, make labels for the inputs, and retrieve which one has been clicked.
Altering your HTML slightly to look like this (the for attribute of the label allows the user to be able to click the label and select the radio button instead of clicking on the button directly):
<div>
<input id="team1" type="radio" name="supporting" value="Team1" /><label for="team1">Team 1</label>
<input id="team2" type="radio" name="supporting" value="Team2" /><label for="team2">Team 2</label>
</div>
<div>
<input id="relaxed" type="radio" name="style" value="relaxed" /><label for="relaxed">Relaxed</label>
<input id="strict" type="radio" name="style" value="strict" /><label for="strict">Strict</label>
</div>
I can get which selections have been made using this:
$('input[name="supporting"]').filter(':checked').val();
$('input[name="style"]').filter(':checked').val();
If you still wish to use buttons, class active is added to a radio button when clicked. To get the button text, try:
$('button[name="supporing"]').filter('.active').text();
$('button[name="style"]').filter('.active').text();
To put this value into a hidden input, do the following:
$('#hiddenInput1').val($('button[name="supporting"]').filter('.active').text());
$('#hiddenInput2').val($('button[name="style"]').filter('.active').text());