Input radio button function not working on jQuery 1.10.1 - javascript

Why is this code not working on jQuery 1.10.1?
Fiddle here -> http://jsfiddle.net/XgDwU/9/
<input type="radio" id="don" name="billing[use_for_shipping]" value="">Ship to this address</input>
<input type="radio" id="don1" name="billing[use_for_shipping]" value="">Ship to different address</input>
<br/><br/>
<b> <input type="checkbox" id="chkSelect" /> Check/Uncheck me </b>
<br/><br/>
<p></p>
here's my function
$(document).ready(function() {
$('#chkSelect').click(function(){
var isChecked = $('#chkSelect').is(':checked');
if(isChecked){
$("input#don").attr('checked',true);
$('p').html('Checkbox is checked: <b>True</b>');
}else{
$("input#don1").attr('checked',true);
$('p').html('Checkbox is checked: <b>False</b>');
}
});
});

Problems:
Use change event instead of click
Use prop instead of attr
I have use this.checked in place of $('#chkSelect').is(':checked')
Try
$(document).ready(function() {
$('#chkSelect').change(function(){
if(this.checked){
$("input#don").prop('checked',true);
$('p').html('Checkbox is checked: <b>True</b>');
}else{
$("input#don1").prop('checked',true);
$('p').html('Checkbox is checked: <b>False</b>');
}
});
});
DEMO
You should read .prop() vs .attr() a very good explanation is provided

You are trying to add a check attribute to a radio button. If more than one radio button in a set has the checked attribute, the latter will be checked. That's what's happening, more than one radio is being checked.
Since it's a radio button, and the browser handles the switching, just trigger a click on the one that you want:
$('#chkSelect').click(function () {
if (this.checked) {
$("input#don").click();
$('p').html('Checkbox is checked: <b>True</b>');
} else {
$("input#don1").click();
$('p').html('Checkbox is checked: <b>False</b>');
}
});
JSFiddle

Related

Jquery is checked doesn't get trigger

http://jsfiddle.net/1uvL7tcm/
$(document).ready(function () {
if ($('#plainText').is(':checked')) {
alert('checked');
}
});
What's wrong with my code? the alert doesn't get trigger.
Try http://jsfiddle.net/1uvL7tcm/3/
You need to bind to all checkbox elements change event as such:
$("input[type=checkbox]").change(function(){
if ($(this).is(":checked")){
alert('checked');
}
});
The code you have runs once, when the page loads. If your checkbox is checked by default, you will get the alert. I modified your jsFiddle to have it checked by default and you get the alert: http://jsfiddle.net/1uvL7tcm/2/
If what you're looking for is to have this code triggered anytime a checkbox is changed, you will have to add a change handler:
$('input[name="checkbox"]').change(function() {
if ($(this).is(':checked')) {
alert('checked');
}
});
In your case the checked condition is only checked once when the dom ready event is fired... what you need is to check the condition whenever the checked state is changed... for that you need to write a handler for the change event using change() method from jQuery.
Since you want the same handler to be fired for all checkboxes, you can use a common attribute among all the three checkboxes which is its name as a selector. So
$(document).ready(function () {
$('input[name="checkbox"]').change(function () {
if (this.checked) {
alert('checked: ' + this.value);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="plainText" value="status">
<label for="plainText">Status</label>
<input type="checkbox" name="checkbox" id="image" value="Images">
<label for="image">Images</label>
<input type="checkbox" name="checkbox" id="video" value="Video">
<label for="video">Video</label>
Try This..
$('#plainText').on('click',function(){
if ($('#plainText').is(':checked')) {
alert('checked');
}
});
Try this...
$(document).ready(function(){
$("input[type=checkbox]").change(function(){
if ($("#plainText").is(":checked")){
alert('checked');
}
});
});

condition on radio button onclick, if false don't check

onclick of one radio button i have to check one condition if true i have to check it or restore to same old status,
html
<input type="radio" name="test" id="radio0" onclick="myFunction()" checked />
<input type="radio" name="test" id="radio1" onclick="myFunction()" />
<input type="radio" name="test" id="radio2" onclick="myFunction()" />
JS
globalCondition = false;
function myFunction()
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}
As I said in comment return in the function will not do anything as you're not returning the function value in the in-line code.
Although the other solutions offered are correct, to keep your code unobtrusive, you should not have inline JS at all (remove the onclick='s).
I realize the question was not tagged jQuery, but maybe it should have been: Instead on onclick you should use a jQuery event handler, selecting only the set of radio buttons.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/KVwL3/1/
globalCondition = false;
$(function(){
$("[name=test]").click(function(e){
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
return false;
// or
e.preventDefault();
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
});
});
Notes:
DOM ready event:
$(function(){ YOUR CODE HERE }); is a shortcut for $(document).ready(function(){ YOUR CODE HERE});
Selectors
If an attribute [] selector = value contains special characters it needs to be quoted:
e.g.
$('[name="IstDynamicModel[SD_WO_CREATE]"]')
There are any number of selectors that will choose just the three radio buttons. As this is a simple one-off connection, at startup, there is no real speed difference between any options, but you would normally try and make the selector specific in ways that might make use of various lookup tables available to the browser:
e.g.
$('input[type=radio][name="IstDynamicModel[SD_WO_CREATE]"]')
This will be slightly faster as it will reduce the slowest check (the name=) to only radio inputs.
try this:
globalCondition = false;
function myFunction(e)
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
e.preventDefault();
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}
USe like this
<input type="radio" name="test" id="radio1" onclick="return myFunction()" />
javascript
globalCondition = false;
function myFunction(e)
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
return true;
}
else
{
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}

Jquery check if radio button is checked

I am trying to uncheck a radio button if it is checked, and likewise check a radio button if it is unchecked. However, it is always saying it is checked when it isn't.
Here is my code:
$('input[type=radio]').on('click', function() {
if ($(this).attr('checked') == 'checked') {
$(this).attr('checked', false);
} else {
$(this).attr('checked', true);
}
});
The above code always hits the first part of the if. I've also tried
$(this).is(':checked')
and
$(this).val()
and
$(this).attr('checked') == true
but nothing seems to be working.
How can I get this to work?
Here is the fiddle hope this myt help:
<input type="radio" name="" value="1000" align="middle" id="private_contest">1000 is the value<br>
<input type="radio" name="" value="2000" align="middle" id="private_contest">2000 is the value
and relevant jquery is:
$('input[type=radio]').on('click', function () {
$(this).siblings().prop('checked', true);
$(this).prop('checked', false);
});
You need to remove the attribute checked to uncheck, and add the attribute to check the radio button. Do not assign value to it:
<input type="radio" name="radio1">
<input type="radio" name="radio1" checked>
use:
$(this).addAttr("checked")
$(this).removeAttr("checked")
This should never fail, but it's a different approach.
Target the parent, and return which radio IS checked, rather than looking at all of them.
Just an idea
var myRadio;
$('#radioParent input:radio').click(function() {
myRadio = $(this).attr('id');
//console.log(myRadio);
//return myRadio;
});
I am not sure why this received negative votes. The usage of a radio button is so that you can have 0 or 1 options to select from, and a checkbox list is if you need 0 or many options selected. But what if you want to undo a radio button selection for an optional question?
I solved this by creating another attribute on radio buttons called "data-checked".
Below was the implementation:
$('input[type=radio]').on('click', function() {
var radioButton = $(this);
var radioButtonIsChecked = radioButton.attr('data-checked') == 'true';
// set 'checked' to the opposite of what it is
setCheckedProperty(radioButton, !radioButtonIsChecked);
// you will have to define your own getSiblingsAnswers function
// as they relate to your application
// but it will be something similar to radioButton.siblings()
var siblingAnswers = getSiblingAnswers(radioButton);
uncheckSiblingAnswers(siblingAnswers);
});
function uncheckSiblingAnswers(siblingAnswers) {
siblingAnswers.each(function() {
setCheckedProperty($(this), false);
});
}
function setCheckedProperty(radioButton, checked) {
radioButton.prop('checked', checked);
radioButton.attr('data-checked', checked);
}
On the page load, set the data-checked property to true or false, depending on whether or not it is already checked.
$(document).ready(function() {
$('input[type=radio]').each(function () {
var radioButton = $(this);
var radioButtonIsChecked = radioButton.attr('checked') == 'checked';
setCheckedProperty(radioButton, radioButtonIsChecked);
});
});

Javascript check box to uncheck other boxes and vice versa

I have the following set of checkboxes:
Original:
<INPUT TYPE="checkbox" ID="db1" class="db" checked>
<INPUT TYPE="checkbox" ID="db2" class="db" checked>
<INPUT TYPE="checkbox" ID="db3" class="db" checked>
<INPUT TYPE="checkbox" ID="db4" class="db" checked>
</br>
Other:
<INPUT TYPE="checkbox" ID="other" class="other" onclick="otherBoxes('other',this)">
and the following javascript:
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function otherBoxes(it,box)
{
$(function()
{
$(':checkbox').click(function()
{
if (this.checked)
{
$('.db').prop('checked',false);
}
}
)
}
)
}
</script>
What I am trying to do is set someting up so that when I check the 'other' checkbox, the 'Original' checkboxes are all unchecked.
I then want to have the reverse, so that if one (or more) of the 'Original' checkboxes are checked, the 'other' checkbox is unchecked.
The Javascript I have so far kind of does the first part of this, in that if I check, then uncheck, then check the 'other' box again, the 'Original' boxes are unchecked.
However, I would like it to work when the box is checked the first time.
It also has the unintended consequence, that after the 'other' box has been checked, the 'original' boxes refuse to be checked, even if I uncheck the 'other' box.
I've found lots of examples of similar situations, but none the same, and I haven't been able to adapt any that I have found. How can I do this please?
You can try something like that
$('.other').on('click' , function() {
$('.db').each(function(){
$(this).removeAttr('checked');
})
});
$('.db').on('click', function(){
$('.other').removeAttr('checked');
});
here it is a working jsfiddle http://jsfiddle.net/vQTFm/
P.S. : I suggest you to avoid using similar names beetwen ids and classs because it CAN be confusing.
You should bind the events using jQuery instead of in the HTML.
Here is some code that does what you want, it binds to the change event on the checkboxes and then checks whether it was the other or db checkboxes that were checked and unchecks the required check-boxes:
$(function() {
$('.db, #other').on('change', function() {
if (this.checked) {
if ($(this).is('#other')) {
$('input:checkbox').not('#other').prop('checked', false);
} else {
$('#other').prop('checked', false);
}
}
});
});
Working example - http://jsfiddle.net/YD5SE/2/
Use the following JS code:
<script type="text/javascript">
function otherBoxes(it,box)
{
if (box.checked)
{
$('.db').prop('checked',false);
}
}
</script>

opposite of click function

what is the opposite function if the user unclicks a checkbox?
this is my script if the user clicks the checkbox
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
$("#OUTsrvOtr").prop('class','text')
});
});
</script>
<input id="INsrv" name="INopt" type="checkbox" value="1" />1<br>
but i want this to run if the user unclicks/unchecks the checkbox
$("#OUTsrvOtr").prop('class','validate[required] text-input text')
Inside click method you can check if if checkbox is checked or unchecked
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
if(this.checked){
$("#OUTsrvOtr").prop('class','text');
}
else{
$("#OUTsrvOtr").prop('class','validate[required] text-input text');
}
});
});
</script>
It's still click, only you need to check this.checked - if it's true then the box has been checked, otherwise (for unchecking it) it's false.

Categories