I don't quite understand how JQM works with radio buttons. I have the following code:
<fieldset data-type="horizontal" data-role="controlgroup">
<label for="radio-choice-h-2a"> Brands </label>
<input name="radio-choice-h-2" id="radio-choice-h-2a" type="radio" checked="checked" class="active" autocomplete="off">
<label for="radio-choice-h-2b"> Stores </label>
<input name="radio-choice-h-2" id="radio-choice-h-2b" type="radio" class="" autocomplete="off">
</fieldset>
JQM does its magic and adds HTML / classes. The result is this:
<fieldset data-type="horizontal" data-role="controlgroup" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all"><div class="ui-controlgroup-controls ">
<div class="ui-radio">
<label for="radio-choice-h-2a" class="ui-btn ui-corner-all ui-btn-inherit ui-first-child ui-btn-active ui-radio-on"> Brands </label>
<input name="radio-choice-h-2" id="radio-choice-h-2a" type="radio" checked="checked" class="active" autocomplete="off" data-cacheval="false">
</div>
<div class="ui-radio">
<label for="radio-choice-h-2b" class="ui-btn ui-corner-all ui-btn-inherit ui-last-child ui-radio-off"> Stores </label>
<input name="radio-choice-h-2" id="radio-choice-h-2b" type="radio" class="" autocomplete="off" data-cacheval="true"></div>
</div>
</fieldset>
I can add logic when a button changes state:
$(document).on('change', '#main-search-result .ui-radio', function(){
//Do something
});
Q1: Why is this working? .ui-radio is just a DIV and does not have a state like a radiobutton.
Q2: How can I detect when the unchecked button is clicked?
UPDATE
I've discovered checkboxradio in the API:
var disabled = $( "#main-search-result .ui-radio" ).checkboxradio( "option", "disabled" );
But I'm not sure if I'm using the right selector.
Disabled is not the same thing as unchecked. Disabled is when you want to prevent the user from changing the state of the button (button is grayed out).
jQM uses the label element as the actual button the user clicks. Checked items have the class ui-btn-active, while unchecked items don't have this class. So you could detect clicks on unselected items like this:
$(document).on("click", '.ui-radio label:not(.ui-btn-active)', function(e){
alert("unchecked button clicked!");
});
.ui-radio label:not(.ui-btn-active) means all labels that do not have the ui-btn-active class, that are within containers having the ui-radio class.
DEMO
Demo includes just detecting the change on the underlying radio inputs.
Related
I am currently doing a project. I have 2 radio button,1) One way 2) Round trip. When the user tried to select the One way radio button, the return text field will hide.
I've saw a thread and someone comment regarding to this problem. Scenario: I chose the One way radio button, the return field will disappear, yes it is working but there's some problem. What if I change my mind, from one way radio button to Round trip? The problem is the return field didn't came back
**View **
// my radio button
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="" >One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
// the return field that will hide/show
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
JS
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function(){
$('div[id^="try"]').hide(); // hide all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>
Just use .toggle()
.toggle()
Description: Display or hide the matched elements.
With no parameters, the .toggle() method simply toggles the visibility of elements:
REF: http://api.jquery.com/toggle/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="">One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function() {
$('div[id^="try"]').toggle(); // toggle all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>
I have 2 radio-buttons and a checkbox.
When the first option is "personalized" the checkbox "hidden" should be automatically checked.
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
I've made this script, but it is not working:
jQuery(document).ready(function () {
if ( $('.personalized input').val() = "personalized" ) {
$('.checkbox input').attr('checked');
}
});
You have few problems. As others already pointed out, you are checking document.ready instead of onChange event. So it checks on page load, instead of checking on radio button state change.
Another problem is that you are checking $('.personalized input') value, but you do not have personalized class in your html.
Your radio buttons have common class form-radio. So you can use it as a selector.
$('.form-radio').on("change", function(){
if ( $(this).val() == "personalized" ) {
$('.form-checkbox').prop('checked', true);
}
else{
$('.form-checkbox').prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
This part:
else{
$('.form-checkbox').prop('checked', false);
}
you only need if you want to un-check if not personalized.
Also take care of .prop() which is used for jQuery 1.6+. For lower versions use .attr()
You have to specify when do you want the script to check if the radio is checked or not. If you use just document.ready() function, it will check it only once, when the site is loaded and since it's not checked - the checkbox won't be checked neither.
You can use following approach: check it with every click event on the radio button.
$('.personalized').click(function() {
if ($(this).is(':checked')) {
$('.checkbox').attr('checked', 'checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' class='personalized'>
<input type='checkbox' class='checkbox'>
Simply you need to do it in ready function
jQuery(document).ready(function () {
if ($(".personalized").is(":checked") ) {
$('.checkbox').attr('checked', 'checked');
}
});
if you want them to apply on page load.
You have several problems here:
The code as written only runs on page load. Since you said you want the checkbox to be "automatically" checked, you should attach a change handler to the radio array.
.val() called on a radio array returns the value of the first element in the selected set, regardless of which one is checked. You need to add :checked to your selector to filter down to the one selected radio element.
Your single equals sign is the assignment operator and should be replaced with ===.
.attr('checked') returns the value of the checked attribute. There are actually two problems here: attr only looks at the attribute initially assigned to the element; you need to use prop instead to update the checked property. The second problem is that the one-parameter attr function is used to read the attribute. You want the two-parameter function to set it.
Here's a working example:
jQuery(document).ready(function () {
$('input[name="radio"]').on('change',function(){
if ( $('input[name="radio"]:checked').val() === "personalized" ) {
$('#hidden').prop('checked','checked');
} else {
$('#hidden').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>
hi to you all i got my code here which i think is right and which is supposed to work fine but it doesn't.i have a radio button group and a checkbox.each of the radio button has a value which will be used as an amount and the checkbox is there only to enable the textbox that will allow the users to enter the amount they want.i made it possible to enable the textbox by checking if it has been checked first.i want to disable the radio group while the checkbox is enabled.
here is a screenshot of what my page actually looks like
here is my html
<label class="radio-inline" style="margin-left:15%;" >
<input type="radio" id="amount_suggest_1" name="montantdon" value="50 000" onFocus="this.blur()" >
50 000</label>
<label class="radio-inline"><input type="radio" id="amount_suggest_2" name="montantdon" value="25 000" onfocus="this.blur()" >25 000</label>
<label class="radio-inline"><input type="radio" id="amount_suggest_3" name="montantdon" value="10000" onfocus="this.blur()" >10 000</label>
<label class="radio-inline"><input type="radio" id="amount_suggest_4" name="montantdon" value="5000" onfocus="this.blur()" >5000</label>
<label class="radio-inline lastradio"><input type="radio" id="amount_suggest_5" name="montantdon" value="1000" onfocus="this.blur()" checked>1 000</label>
<div class="row" style="padding-left:20px;">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5" style="width:200px;width:200px;margin:auto;margin-top:2%;">
<div class="input-group input-group-amount" >
<label class=""><input type="checkbox" name="autresdon" id="autresdon" /> Autres</label>
<div style="display:inline-block;vertical-align:top;"><input type="text" style="width:50px;" name="amountentered" id="amountentered" disabled /></div>
<div style="display:inline-block;vertical-align:top;">
<div class="input-group-btn" style="position:relative;">
<button type="button" class="btn btn-default btn-lg dropdown-toggle currency-current" data-toggle="dropdown"><span class="currency" id="currency">EUR-€</span> <span class="caret"></span></button>
and here is my jquery code
$('#autresdon').click(function(){//on click the checkbox
if($('#autresdon').is(':checked'))
{
$('#amountentered').prop("disabled",false);//enables textbox
}
else
{
$('#amountentered').prop("disabled",true);//on unset checkbox disable textbox
}
});
//disabling radio group by using their class as selector
$('.montantdon ').click(function(){
if($('#autresdon').is(':checked'))
{
$('#autresdon').prop("checked",false);
}
});
i dont want both data(value of the radios and amount entered manually) to be posted.how can i solve this issue? thanks
If I understand the question correctly, I'd suggest:
// binds the change-handler:
$('#autresdon').change(function(){
// sets the 'disabled' property to false (if the 'this' is checked, true if not):
$('.radio-inline').prop('disabled', !this.checked);
// triggers the change event (so the disabled property is set on page-load:
}).change();
Incidentally, with JavaScript (and especially in jQuery, in which it becomes entirely unnecessary) stay away from in-line/obtrusive JavaScript. using onFocus/onfocus, onchange, onclick etc makes for a maintenance nightmare and creates some terribly (and, again, unnecessarily) untidy HTML.
References:
change().
prop().
I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.
http://jsfiddle.net/ds345/Un8XK/1/
HTML:
<fieldset data-role="controlgroup" data-type="vertical">
<input type="radio" name="radio" id="x" data-theme="a" />
<label for="x" style="color: White">X</label>
<input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
<label for="y" style="color: White">Y</label>
<input type="radio" name="radio" id="z" data-theme="a" />
<label for="z" >Z</label>
<input type="radio" name="radio" id="none" data-theme="a" />
<label for="none" style="color: White">None</label>
</fieldset>
<button id = "Refresh" value="Refresh">Refresh</button>
JS:
$(document).ready(function () {
$("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh.
});
$("#Refresh").click(function(){
$("#x").attr("checked", false).checkboxradio("refresh");
$("#y").attr("checked", false).checkboxradio("refresh");
$("#z").attr("checked", false).checkboxradio("refresh");
$("#none").attr("checked", true).checkboxradio("refresh");
});
I am sure that I have missed something very small but not able to figure out why this approach is not working.
Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3
Thanks,
Deeksha
You should use prop over attr when dealing with boolean attributes.
.attr("checked", false) will add checked="false" to your element.In HTML, <input checked="false" .../> is the same as <input checked="true" .../> or simply <input checked .../> as the attribute simply needs to be present on the element for it to be active.
See this JSFiddle example.
Change your code to use .prop() instead:
$("#none").prop("checked", false)...
Here is a fixed version of your JSFiddle demo: http://jsfiddle.net/Un8XK/8/
What you have missed is that there is no need for script. Simply use a form with a reset button:
<form>
<input type="radio" name="radio" value="0" checked>0<br>
<input type="radio" name="radio" value="1">1<br>
<input type="radio" name="radio" value="2">2<br>
<input type="radio" name="radio" value="3">3<br>
<input type="reset">
</form>
If you really must use script, you can simply return the radio buttons to their default by adding a button to the form:
<input type="button" onclick="reset(this.form.radio);" value="Script reset">
and a function:
<script>
function reset(els) {
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].checked = els[i].defaultChecked;
}
}
</script>
I am trying to checkbox when the div.menuitem is clicked and then it should change class and show the content in the div with class of hidediv. When the div.menuitem is again clicked it should remove the class and hide the div again and uncheck the checkbox.
Want I want to do:
Only show the content of the hidediv when the menuitem is pressed. (checkbox should be checked)
When the menuitem is pressed the checkbox should be checked
When the menuitem is clicked again the hidediv should be hidden again. (checkbox unchecked)
And the checkbox should be uncheched
Illustration of my menu form:
<div class="menuitem">
1.Company1
</div>
<div class="hidediv">
1.1 Company 1.1
1.2 Company 1.2
</div>
<div class="menuitem">
1.Company2
</div>
<div class="hidediv">
1.1 Company 2.1
1.2 Company 2.2
</div>
My previous Jquery code, which only is trigger when the checkbox is clicked. I want pretty
similar function to this, the checkbox should also be trigghed when the div is clicked:
$('.menuitem input:checkbox').change(function(){
if($(this).is(':checked')) {
$('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again.
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
});
});
My Jquery so far(not working):
$('.menuitem').click(function(e){
$(this).addClass('menuclicked');
$('div.hidediv').addClass('clicked').show(200);
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
$('.menuclicked').click(function(e){
$('div.someclass').addClass('hidediv').hide(200);
});
My HTML:
<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
I can help. I think you are structuring this wrong. You have three fields in your html, with the third being hidden. I assume when you fill in the first one you want nothing to happen, but clicking the second one should show the third field?
Try this:
//Use toggle instead of .click()
$('.menuitem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
This will effect all divs with the "menuitem" class, meaning when you click on any of the three it will toggle showing/hiding the div with the "hidediv" class.
edit you have a couple valid answers here, but I think you're approaching this wrong. If you go try the jsfiddle posted by another user, whos' javascript does the same as mine - it reveals the problem I talked about above. You cannot select all three boxes without some clever clicking. Each click will toggle showing/hiding the third check box. Might I suggest modifying your code like so:
//Use toggle instead of .click()
$('.toggleMenuItem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
<form accept-charset="UTF-8" action="/" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" />
<input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem toggleMenuItem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" />
<input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" />
<input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
This will make it so only clicking the checkboxes with the class ".toggleMenuItem" will show the third checkbox.
try something like this:
$('.menuitem').click(function(e){
if($(this).hasClass('menuClicked')){
// Already clicked
$(this)
.removeClass('menuclicked')
.html("");
}else{
// First click
$(this)
.addClass('menuclicked');
.html($('#hidediv').html());
}
})
This may do what you're looking for:
$('.menuitem').click(function(e){
$(this).toggleClass('clicked');
$('div.hidediv').toggle(200);
});
Let me know if it is missing a feature.
http://jsfiddle.net/citizenconn/2bCdR/