I have a couple of radio buttons in my application and by default none of them is checked. When I check one of them, and call a javascript to see which is checked, the radio button which is checked does not show checked in JS or HTML Markup(F12). I dont knw what's causing this wierd issue. Kindly assist.
Thanks
EDIT: i'm using the following JS to see if the parent container of the radio buttons has "CHECKED" in its innerHTML.
if( document.getElementById('ctl00_ContentPlaceHolder1_' +
controlid).cells[cv].innerHTML.indexOf("CHECKED") > -1)
You can use this code to check if a checkbox is checked:
if (document.getElementById('checkboxId').checked == true)
//Code here...
The DOM-attribute "checked" does not change when you click the checkbox, it's used to know how it should be initialised.
In JQuery there is a convenient selector for that.
$("input:checked").each(function(i,v){
console.log(v.value);
})
Here is an example:
http://jsfiddle.net/f369xbt5/3/
Related
What I want is to make checkbox checked when the required data == 1. For example, if data.add_content ==1 then make checkbox checked. The problem in my code is that checkbox only checked after I refresh the page. I do not want to refresh the page, could I use callback function to achieve that or what to do? please explain with code sample. thanks
UPDATED CODE fiddle
Have you tried change the following
data.add_content ==1
to
data.add_content =="1"
I'm having some trouble using JQuery to check and uncheck an input. I know that .prop is the proper way to do it, but it doesn't seem to be working for me. Here's my code:
HTML:
<div class="checkwrap"><input name="mentoringType" type="checkbox" checked="false" value="test">test</div>
JS:
$('.checkwrap').click(function() {
if ($(this).find('input').is(':checked')){
$(this).toggleClass('checkwrap-active').find('input').filter(':checkbox').prop('checked',false);
} else {
$(this).toggleClass('checkwrap-active').find('input').filter(':checkbox').prop('checked',true);
}
});
The input is wrapped for styling purposes. If I use .attr('checked',true/false) instead, then it works to change the checked property to checked, but it does not uncheck. What's going on?
Eggplant is right: you should use a lebel element to make "test" clickable.
To answer your question:
Your skript does work, when only the text ist clicked.
It also works, but not as expected, when the checkbox is clicked. In this case your code leads to a duplication of the ation executed, because the click event bubbles up the DOM tree.
If the checkbox is not selected, a click on it makes it being selected and your code comes in, detects it as being selected and unselects it again.
For an unselected box it works vice versa.
But as stated before: you should have chosen a label in the first place.
I'm currently experiencing an issue with my code. I have a form, which consists of multiple checkboxes. These checkboxes open if you click on the box itself or on the labels within. If you click, another div is shown cancel_body. This shows a list of options which aren't really related to the form results, just to show info for the user. My problem is that in IE it doesnt work as expected. You can click on checkbox, it ticks, but nothing shows. Click several more times then it shows. There is no pattern that I can make out. Does anyone have any idea why this may happen?
Thank you!
$('input[type=checkbox]').change(function () {
if ($(this).attr("checked")) {
$(this).parent().next(".cancel_body").show(600);
}else{
$(this).parent().next(".cancel_body").hide(600);
};
});
You should use prop() instead of attr() for Boolean values:
if ( $(this).prop("checked") )
...
attr() will return undefined if the checked attribute is not present on the element, and "checked" if it is present, regardless of whether it's set to true or false: http://jsfiddle.net/yz4K6/
However as Barmar has mentioned in comments, you can simply use this.checked instead:
if ( this.checked )
...
Simple prospect. Checking a checkbox enables a disabled button. Unchecking the box disables the button once more.
Code:
jQuery ->
$('#subscribe_button').attr('disabled','disabled')
$("[name=chkACCEPT]").click ->
if $(this).attr("checked")=="checked"
$('#subscribe_button').removeAttr('disabled')
else
$('#subscribe_button').attr('disabled','disabled')
I have also tried to use prop in lieu of attr. Seems like such a simple thing. Enable and disable a button. I've put alerts in there, and I know the code is firing. Just failing to do what I want it to.
Instead of using attr(), you need to use .prop() to set the disabled status
$('#subscribe_button').prop('disabled', true)
$("[name=chkACCEPT]").click ->
$('#subscribe_button').prop('disabled', !this.checked)
Also use the checked property of the dom element to check whether the checkbox is checked or not
In your example you are setting disabled="disabled" however the correct way to do it is disabled="true". You can use the this.checked value to set the disabled attribute on the button element:
$('#subscribe_button').attr('disabled', true)
$("input[name=chkACCEPT]").click ->
$('#subscribe_button').attr('disabled', !this.checked)
See the jsFiddle here, button is enabled only when the checkbox is checked.
Summary of problem statement: Radio button html on the browser does not display the checked attribute, but Firebug indicates that the radio's checked attribute is set as checked.
Tested on
Broswer: FF 3.6.18 and IE8
jQuery: 1.5
MVC3 (Razor)
Details
Using MVC3 (with Razor) I'm rendering the following radio buttons from the server. The desired functionality is that on checking one radio, the other should be unchecked and vice-versa. In other words, the user is allowed to only select one option - say val1 or val2.
<div id="myRadioList">
<div>
<input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
</div>
<div>
<input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
</div>
</div>
What I'm observing is that if the user toggles the radio selected, the newly selected radio (let's say myRadioName_val2) is shown to be checked using firebug but the html still reflects the other radio button as checked. Because of this, some other validations are failing.
I've tried literally removing all checked attributes of both the radio buttons and then just check the one that's clicked.
This is what I'm doing to set the currently clicked radio, that is not working:
$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');
I'm simplifying my code to avoid posting unnecessary details.
The checked attribute in HTML is the default value.
The checked property in JavaScript refers to the current state of the radio button.
Generally, it's best to let the browser handle the checked state of radio buttons and checkboxes rather than setting it yourself, otherwise you run into these kinds of problems. It's safe to get the current state via prop("checked") as already suggested, or through .is(":checked").
You may also want to consider using syntax like $('#myRadioList').find('input[value="myRadioName_val2"]') or better yet, $('#myRadioName_val2'), as child selectors in jQuery can be rather slow, since they are read right to left.
You should use
$("#myRadioList > div > input[value=myRadioName_val2]").prop('checked', true);
Well, you do have a syntax error withing the jQuery selector. It should be:
$('#myRadioList > div > input[value="myRadioName_val2"]')