<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.
Related
I have a checkbox and two radio button.
On change event of one of the radio, I am making checked attribute of checkbox true.
It works only once.
Demo
Step to replicate it,
1. click on ugly (checkbox is checked)
2. uncheck the checkbox
3.toggel btw ugly and good(no effect :(
Spent a lot of time on this, but couldn't figure out what's going on.
Update your code as follows:
Use prop() method instead of attr() method to update the checked property.
Bind change event handler commonly and update the property based on selected radio button value.
// or select based on the name attribute
// `$('input[type=radio][name="gender"]')`
$('input[type=radio]').on('change', function() {
$('.xyz').prop('checked', this.value == 'bad');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Car" class="xyz"> I have a car<br>
<input type="radio" name="gender" value="good"> Good Oned<br>
<input type="radio" name="gender" value="bad"> Ugly<br>
Try this if condition .clicked radio button value is bad the clicked true are else false appear in checked attr .You should use prop() method instead of attr
updated
Why not working?
you selector was wrong .you have $('input[type=radio][value = "bad"]') .its select only value bad radio
button not for both .So only if you click other radio button the
checkbox was not unchecked
$(document).ready(function() {
$('input[type=radio]').on('change', function() {
$('.xyz').prop('checked', $(this).val().trim() == 'bad');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Car" class="xyz"> I have a car<br>
<input type="radio" name="gender" value="good"> Good Oned<br>
<input type="radio" name="gender" value="bad"> Ugly<br><br>
I am facing one issue
HTML
<input id="cb" type="checkbox" name="Employment_Staus" value="E" />
<input type="button" value="Check" id="id" />
JQUERY
$('#id').click(function(){
$('input[type="checkbox"]')[0].setAttribute("checked", "checked");
});
First time when I click on check button, it works!(it check the check-box ), then I manually uncheck the check box!
When I press check button again after uncheck manually , it not work!
I don't want to use attr or prop etc etc !!
Example
http://jsfiddle.net/wL6qr0hp/4/
The checked attribute sets the default state, not the current state.
Modify the checked property (with .checked = true) instead.
Proceed </button>
<input type="checkbox" name="checkbox3" value="yes">
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
I have a checkbox and a button which will take me to next page. But, before I press the button the check box has to be ticked. If not, a label has to be displayed below the check box saying "accept to rules first". Help? Also, it would be great if i can highlight the checkbox to red if i click proceed without checking the checkbox. Can use javascript/jquery.
Try this it works
<form action="page.html">
<input type="checkbox" name="checkbox3" value="yes" required>
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
<input type="submit" name ="submit"/>
</form>
To get you started:
<input id="checkboxAgree" type="checkbox" name="checkbox3" value="yes">
function checkAgree()
{
if (document.getElementbyId("checkboxAgree").getAttribute("checked") )//checkbox is checked
{
location.href = "page.html"; //load the next page.
}
else
{
Alert("You need to check the box before you can continue");
}
}
document.getElementById("proceed-button").addEventListener("click", checkAgree ,false);
addEventListener add an onclick event to the button. When clicked this executes the function checkAgree. When the checkbox has the attribute checked it is checked and the ifwill render true. location.href will load page.html.
Please delete the a that surrounds your button.
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
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(...)