I have two radio buttons. One is checked by default but I want to uncheck that one and check an other one by default.
So I have this HTML:
<div class="gui-radio">
<input type="radio" value="register" name="choise" id="new-register">
<label for="register">Register</label>
</div>
<div class="gui-radio">
<input type="radio" checked="checked" value="guest" name="choise" id="new-guest">
<label for="new-guest">Guest</label>
</div>
This all automatically generated. I need this to be done with Jquery.
So How do I uncheck the second one and check the first one?
jQuery 1.6+
You can check a checkbox by setting .prop('checked', true); and uncheck it by setting .prop('checked', false);.
$('#new-register').prop('checked', true);
$('#new-guest').prop('checked', false);
jQuery 1.5 and below
$('#new-register').attr('checked','checked');
$('#new-guest').removeAttr('checked');
This checks the first radio:
jQuery('input#new-register').prop('checked', true);
Also closing the inputs might be a good idea:
<div class="gui-radio">
<input type="radio" value="register" name="choise" id="new-register" />
<label for="register">Register</label>
</div>
<div class="gui-radio">
<input type="radio" checked="checked" value="guest" name="choise" id="new-guest" />
<label for="new-guest">Guest</label>
</div>
jsfiddle link
They are already connected by their name attributes, so all you need to do is make the first one checked - the second one will automatically become unchecked, because in a radio group only one can be selected.
This is how you make a radio/checkbox checked in jQuery:
$('#new-register').prop('checked', true);
Remember to use prop, not attr.
jsFiddle Demo
Related
I have four check boxes inside a separate label.
If I select first check box then all remaining check boxes will be disable. If I click first again, all check boxes will be enabled.
If I select any other check box, the others are still enabled: I can select more than one. See image here
How can I set this up?
Try this:
HTML:
<label for="one"><input type="checkbox" name="one" id="one"></label>
<label for="two"><input type="checkbox" name="two" id="two"></label>
<label for="three"><input type="checkbox" name="three" id="three"></label>
<label for="four"><input type="checkbox" name="four" id="four"></label>
jQuery:
$('input[type="checkbox"]').on('change', function() {
if($('input[type="checkbox"]').eq(0).is(':checked')){
$('input[type="checkbox"]').not($(this)).attr('disabled', true);
}
else{
$('input[type="checkbox"]').not($(this)).attr('disabled', false);
}
});
Working example: https://jsfiddle.net/e26vnnk2/
If you are asking in order to find out how to disable all other "checkboxes," use radiogroups. If you are saying that the first checkbox auto-triggers a toggle on the other checkboxes, try ungrouping them, or making them separate in and of themselves, because it sounds as if you have some kind of faulty grouping and dependency there.
I have a div and inside that div i have check boxes with name attribute as an array, now i want to heck if at least one check box is checked.
<div id="check_lists">
<input type="checkbox" name="usernames[]" value="1">
<input type="checkbox" name="usernames[]" value="2">
<input type="checkbox" name="usernames[]" value="3">
<input type="checkbox" name="usernames[]" value="3">
</div>
You can use attribute equals selector with .is() and :checked-selector
if($('input[name="usernames[]"]').is(':checked')){
//at least one is checked
}
use length to find at least one check box is checked
if($('#check_lists input[type=checkbox][name="usernames[]"]:checked').length){
// at least one check box is checked
}
I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.
Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/
You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)
<input class=checked-val type="checkbox" value="foo" checked="true" />
<input class=checked-val type="checkbox" value="bar" checked="true" />
Initially both checkbox are checked. But When I click any checkbox its checked value should be changed to checked=false. How can I do it using jquery or javascript?
You need to remove the attribute "checked".
$("#selector").removeAttr("checked");
Obviously the checkbox will check/uncheck anyway when a user clicks on it, but if you want to do it programatically:
<script type="text/javascript">
document.getElementById('cb_foo').checked = true;
document.getElementById('cb_bar').checked = true;
</script>
<input class=checked-val type="checkbox" id="cb_foo" value="foo" checked="true" />
<input class=checked-val type="checkbox" id="cb_bar" value="bar" checked="true" />
Use this:
$('.checked-val').removeAttr('checked');
Please note the syntax of your input must be:
<input type="checkbox" value="..." name="..." class="checked-val" checked="checked" />
The mechanic behind the check are:
With checked="checked", checkbox active and posted by the form submit
Without attribute checked, checkbox not selected and not posted by the form submit
Initially both checkbox are checked.
But When I click any checkbox its
checked value should be changed to
checked=false. How can I do it using
jquery or javascript?
If you want this to happen you can .one() which attaches an event handler that only fires once. Combine that with the other items you can simply uncheck both boxes.
$(".checked-val").one("click", function(){
$(".checked-val").removeAttr("checked");
});
Code example on jsfiddle.