The JavaScript page for Bootstrap shows some nice use of buttons to style checkboxes and radio fields. For example, for a checkbox, I might write
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
</div>
However, the library doesn't actually change the value of the underlying <input> field -- it just changes whether the <label> field has class active. I would have expected it to change the checked attribute on the checkbox. Apparently I don't just have it misconfigured -- this is the way the examples on the Bootstrap site work.
Is this actually expected behavior? If so, it seems fairly useless, as people are going to want to use the checkbox field. If not, how do I properly configure Bootstrap checkboxes/radio buttons?
The checked attribute on the input isn't modified because that isn't what changes when a checkbox input is checked -- the checked DOM property is what changes (true or false), and Bootstrap handles this properly (you can inspect the element in Firebug and see the DOM property change when you toggle them). The checked attribute is only used to determine default value when the DOM is initially rendered.
If you ever happen to be doing any js/jQuery with checkboxes/radios, remember this! If you need to programatically check a checkbox or radio button, $('input').attr('checked', 'checked'); will not get the job done. $('input').prop('checked', true); is what you need.
This isn't special behavior for Bootstrap buttons, this is how all checkbox/radios work.
Edit: Firebug screenshot
Edit 2: Added text from the comments, as it seems to be helpful.
It looks like you are missing a call to "activate" the btn-group (documentation). Here is a demo of this working:
<form id='testForm'>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name='Option' value='1' />Option 1</label>
</div>
</form>
<button class='btn' id='actionSubmit'>Submit</button>
<script>
$('#actionSubmit').on('click', function (e) {
e.preventDefault();
alert($('#testForm').serialize());
});
$('.btn-group').button();
</script>
I am doing it like this for MVC.NET in case anyone needs it:
#{
var removeSelected = Model.Remove == true ? "active" : "";
var buttonText = Model.Remove == true ? "Add" : "Remove";
}
#Html.HiddenFor(model => model.Remove)
<div class="editor-field">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" id="RemoveButton" class="btn btn-primary #removeSelected" onclick="toggle();">#buttonText</button>
</div
</div>
function toggle() {
var value = $("#Remove").val();
if (value == "False") {
$("#Remove").val("True");
$("#RemoveButton").text("Add");
}
else {
$("#Remove").val("False");
$("#RemoveButton").text("Remove");
}
}
And finally don't forget to add the bootstrap js refence.
Related
I am trying to set up a set of radio buttons using Bootstrap in javascript
The code I am trying is:
var viewedFilterButtons = $("<div>").addClass("btn-group").attr("data-toggle", "buttons");
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off").append($("<label for=\"viewed-important\">").text("Important"))));
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed").attr("type","radio").attr("name","viewed-filter").attr("value","viewed").attr("autocomplete","off").text("Reviewed")));
(note that I'm trying 2 different things to get the text into the button -- in the first input I'm embedding a label and in the second I'm just trying to set the text of the input. Neither is working right now.)
This generates the following HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="viewed-important" name="viewed-filter" value="important" autocomplete="off" type="radio">
<label for="viewed-important">Important</label>
</input>
</label>
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed
</label>
</div>
Note that the input doesn't seem to be closed in the second case. I'm getting this HTML from the Web Console Inspector in Firefox.
What I'm getting is a set of tiny radio buttons with no text. The toggle behavior works fine.
What am I missing here? When I manually generate a set of labels for radio buttons like this directly in the HTML it works fine.
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed</input>
</label>
This is because you append the <label> inside the <input/>.
You're trying to do this :
<input> <label>Important</label> </input>
However, <input/> is a self-closing tag, not a container like a <div>.
You should design your structure like this :
<label> <input/> Important </label>
input elements cannot have children w3 specification. Put the label after it.
var viewedFilterButtons = $("#mainDiv").addClass("btn-group").attr("data-toggle", "buttons");
var inputElem = $("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off");
viewedFilterButtons.append(inputElem)
.append($("<label for=\"viewed-important\">").addClass("btn").addClass("btn-primary").text("Important"));
<link href="https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="mainDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Please inspect the following Console output, note that the 1st input has checked attribute and is selected:
You can see I have 2 radio inputs, 1 is checked, however neither selector nor prop nor is works for it. The code works correctly if I manually click on one of the radio. Here is my HTML:
<div class="col-sm-6">
Type:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="generator-type" id="opt-type-passphrase" value="0" autocomplete="off" checked>
Passphrase
</label>
<label class="btn btn-default">
<input type="radio" name="generator-type" id="opt-type-password" value="1" autocomplete="off">
Password
</label>
</div>
</div>
Why is the code not working when the page loads when I haven't clicked any radio? Is there a way to fix it?
EDIT: Found the problem, I have this code in the page load:
$("input[name='generator-type'][value=" + this.Options.Type + "]").prop("checked", "");
The correct solution is using:
.prop("checked", true)
But can anyone please explain how it work? Why is there the checked attribute, but prop function is still false?
Try .is(':checked') instead of .is('checked'). Please check this Fiddle.
You need to check like this
$( ... ).is(':checked')
Why? Because the jquery is method accepts a css selector which it uses to filter the currently matched elements.
Thus temp.is('checked') will only be true if the temp elements have the checked tag. In your case they have the input tag so do not match.
Using :checked matches on the css pseudo selector for whether the current element is checked or not. This is what you want.
Knowing this, you could also use $( ... ).is('[checked]'), which will return true if the matched elements have the checked attribute. That's probably what you were trying to do originally. Though, the conventional way is to use :checked.
You're missing a colon in the is-checked code:
temp.is(":checked")
instead of
temp.is("checked")
I am completely new to Meteor and I'm trying to build a simple app. I currently have a form with 4 radio options and a submit button. When users click the submit button and I want to know which radio option they selected. I have no idea how to get started though. Can anyone help me? Below is my html and javascript code, respectively:
<form class="form-horizontal well mystery-form">
<fieldset class="col-md-offset-1">
<h2>{{question}}</h2>
<br>
<div class="form-group">
<div class="col-md-10 mystery-form">
{{#each answers}}
<div class="radio">
<label>
<input type="radio" name="mysteryForm" checked=""
style="margin-bottom: 0; margin-top: 0;">
{{answer}}
</label>
</div>
{{/each}}
<br>
<button type="reset" class="btn btn-default">Back</button>
<!-- Hide this when the answer is correct -->
<button type="submit" class="btn btn-primary">Check Answer</button>
<!-- Show only if the answer is correct -->
<button class="btn btn-primary">Next</button>
</div>
</div>
</fieldset>
</form>
JS:
Template.mystery.events({
"submit .mystery-form": function(event) {
// no idea what to do here
}
});
Semantics
You'll probably want to remove the whole wrapping .radio element. It's unnecessary. Try using as few elements as possible. It performs better and makes debugging easier.
Retrieving the checked input
The event object passed to an event-map callback has a property target. In your case that is .mystery-form. So you can use a simple jQuery selector to find the checked element:
$('input[name="mysteryForm"]:checked', event.target)
This will get you the checked value with the name mysteryForm. This was quiet straight forward. The problem is retrieving the value. Doing that would get sort of messy. So I'd just pass it to the element as a data- attribute:
<input type="radio" name="mysteryForm" checked="" style="margin-bottom: 0; margin-top: 0;" data-answer="{{ answer }}" >
Now you can simply do this:
$('input[name="mysteryForm"]:checked', event.target).data('answer')
First, you may want to prevent the normal form submission and avoid a page reload. As you are building a single page application you will want to do the form submission logic by yourself. Also, reloading the page by form submission does not make any sense in such application.
Secondly, you have to actually gather the data, and then do what you want with these data.
Put it all together and you get something like this:
Template.mystery.events({
"submit .mystery-form": function(event, template) {
//1. prevent default behavior (form submission)
event.preventDefault();
//2. get your data
//either by name (HTML name attribute)
var inputValue = template.mysteryForm.value;
//or by id (HTML id attribute)
var inputValue = template.find('#myId').value;
//3. Do whatever you want (method call for example?)
Meteor.call('myMethod', inputValue, function(error, result) {
//wait for the call result...
});
}
});
:) So I'm trying to create a user questionaire type form, it doesnt have to send to anyone just display a div once certain radio buttons are checked and if them certain radio buttons arent checked then display a different div, but also when the webpage opens/refreshes none of the div's I want to display to be displayed (if that makes sense?). I found some code on here to try but it didnt work for me, I'm a noob with JS & Jquery but was hoping anyone could shed some light on my problem. please find my code below.
Jquery?
if($('input[value=yes1]:checked,
input[value=yes2]:checked,
input[value=yes3]:checked,
input[value=yes4]:checked').length == 4){
$("#correct").show();
}else{
$("#correct").hide();
HTML
<div class="row">
<div class="left">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes1" value="yes1" name="iCheck1">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no1" name="iCheck1">
<label>No</label>
</input>
</div>
</div>
</div>
<div class="right">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes2" value="yes2" name="iCheck2">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no2" name="iCheck2">
<label>No</label>
</input>
</div>
</div>
</div>
Yes
No
Yes
No
CSS
#correct{width:100%; height:50px; background:green; display:none;}
#incorrect{width:100%; height:50px; background:red; display:none;}
I think this is what you're looking for. I had to change the number of "correct" answers to two because that's all the html you have.
JS:
$( "input" ).on( "click", function() {
if($('input[value=yes1]:checked, input[value=yes2]:checked').length === 2){
$("#correct").show();
}else{
$("#correct").hide();
}
});
Working JS Fiddle: http://jsfiddle.net/akj84vrq/12/
A little something like this would probably get you what you want.
http://jsfiddle.net/uu512erm/
Listen for change event on the radio inputs by $('input:radio').change(function(){}
and then just add the logic inside.
I'm not sure that this can be accomplished via CSS.
Now, you are checking against some values/elements that don't exist in your code (ie input[value=yes3]:checked, you don't have input with that value, check it for yourself).
I don't understand what exactly you want to accomplish, but I will still try to help and since you're new let's keep it very basic:
if ($('input[value=yes1]').is(':checked') && $('input[value=yes2]').is(':checked')) {
// this will fire only if input with values yes1 and yes2 is checked
$('div_to_show').show(); // put your own selectors here
$('div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=no1]').is(':checked') && $('input[value=no2]').is(':checked')) {
// this will fire only if input with values no1 and no2 is checked
$('some_other_div_to_show').show(); // put your own selectors here
$('some_other_div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=yes1]').is(':checked') && $('input[value=no1]').is(':checked')) {
# this will fire only if both input with values yes1 and no1 is checked
$('some_other_div_to_show').show(); # put your own selectors here
$('some_other_div_to_hide').hide(); # put your own selectors here
}
# and so on... just type in your conditions and that's it.
If you need some other cases, just add them using this pattern or construct one complex else if statement with all your scenarios.
I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.