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 )
...
Related
I have a form with a 'Reset' button. When i select my radio button the data from my DataTable is passed and pre-pops my fields. This working fine and does in fact pre-populate the relevant radio button
JQuery
if (modifyRecordData.startTime == 'Anytime') {
$('#anyTimeRadioButton').attr('checked', true);
$('#specificTimeRadioButton').removeAttr('checked');
$('#startEndTimeFields').hide();
} else {
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').attr('checked', true);
$('#startEndTimeFields').show();
$('#startTimeHr').val(modifyRecordData.startTimeHr);
$('#startTimeMin').val(modifyRecordData.startTimeMin);
$('#endTimeHr').val(modifyRecordData.endTimeHr);
$('#endTimeMin').val(modifyRecordData.endTimeMin);
}
Data returned
Page loaded
Now the issue, if the user, after data load goes to update the details and selects the other radio button the hidden fields are displayed (again correct)
Then user clicks the 'Reset' button and it fails in the correct function
$('#resetButton').mousedown(function (event) {
buttonclicked = "Reset";
event.stopImmediatePropagation();
modifyRadioButtonSelection(modifyRecordData);
})
and then goes back to the initial loaded data and it does drop in the IF code above
Debuging
Then it re-hides the hidden section (which is correct) but it does not re-tick the radio button as expected.
If i dont have the following code in the IF it leaves the previously selected one checked although the data falls in the IF
$('#specificTimeRadioButton').removeAttr('checked');
No idea whats going wrong at all. I even tried adding the following the 'Reset' button function but it just will not re-check the correct `radio button
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').removeAttr('checked');
Historically, there's been a lot of ambiguity and confusion between three related but different concepts:
The value of the HTML attribute in the source code.
The value of the HTML attribute in DOM tree.
The value of the JavaScript property.
To address that, jQuery/1.6.1 introduced the prop() method, which I suggest you adopt.
I have a div in a form (#sides) that I only want displayed when one checkbox (.opp-choice-checkbox) is not checked. Here's the code I have right now:
jQuery ->
if !$(".opp-choice-checkbox").checked
$("#sides").hide()
$(".opp-choice-checkbox").click ->
$("#sides").slideToggle()
A similar question is asked a lot, but the difference with my question is that when I go to edit the object the form is for, sometimes the checkbox is checked by default. In that situation, I want the div to be showing when the page is loaded. The code I have right now hides the div by default, regardless of whether or not the checkbox is checked
UPDATED
Your code working perfectly with the little update mentioned below, See Working fiddle for your code:
CoffeeScript :
You have just to add the else in your condition to show the div if the checkbox is checked :
jQuery ->
if !$(".opp-choice-checkbox").is(":checked")
$("#sides").hide()
else
$("#sides").show()
$(".opp-choice-checkbox").click ->
$("#sides").slideToggle()
If sometimes you have a chekcked checkbox by default, you have just to remove condition and replace your coofee code by the following :
jQuery ->
$(".opp-choice-checkbox").change ->
$("#sides").slideToggle()
See fiddle HERE.
I hope this will help.
$(".opp-choice-checkbox") doesn't have a checked property - that's a jQuery element. To get the regular DOM elem, use [0]
$(".opp-choice-checkbox")[0].checked
Or, use .is("checked")
$(".opp-choice-checkbox").is("checked")
If this is all attached to a change or click event, just run that event on load to trigger the behavior, ($(elem).change(function() { }).change())
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/
Since I don't have enough points to leave a comment, I must ask a question. The situation I'm referencing can be seen here LINK. And I promise that I've Googled for hours before posting a question.
I'm trying to be able to "toggle" HTML checkboxes to be readonly. Here is where I am so far.
"DISABLED" is NOT an option. It won't post with the form.
"READONLY" is NOT really readonly. It may gray-out, but it can still be clicked.
The only thing that seems to work is what the LINK refers to and that is applying READONLY to the checkboxes and then some jQuery like:
$(':checkbox[readonly=readonly]').click(function(){return false;}); or $(':checkbox[readonly=readonly]').click(function(){return true;});
I've also messed around with swapping classes in case there was something limiting about the readonly attribute.
THE PROBLEM is that whatever the first setting becomes (TRUE or FALSE) is what it stays like until the page is refreshed. I can't re-enable the checkboxes simply by running the other statement to return the opposite (FALSE or TRUE).
QUESTIONS
Is there a way to be able to toggle the RETURN (TRUE or FALSE) for the .click event?
Is there another alternative for toggling the ability to check the checkboxes?
Thanks a bunch.
jsFiddle DEMO
If you want to toggle between return false; & return true; you could use .change() event & come up with a specific condition to toggle.
$(':checkbox[readonly=readonly]').change(function () {
if($(this).is(':checked'))
console.log("return false");
else
console.log("return true");
});
OK finally figured it out. I'll try to keep my points organized.
Include jquery-ui.js, not sure why, but it needs it.
Use a .change() event to add and remove two classes that designate READ/WRITE
Use $('.ReadClass').bind('click',false); to prevent checking
Use $('.ReadClass').unbind('click', false); AND switch the classes AND add $('.WriteClass').bind('click',true); to en-enabled checking
Here is a link to my jsFiddle demo.
The demo loops through all specified form element to toggle the ability for the user to enter data.
Hope this helps somebody else.
I have a little issue, if i select an single checkbox and press f5 the state of the checbox will remain(so it will be checked) but if i use jQuery to select all checkboxes on a page and then press f5 all of the checkboxes will blank(so uncheck, only the one's that are handpicked will remain in there state). How can i solve this, so that when i hit refresh everything will remain the same?
the code
jQuery('.sellectall').click(function(){
$('input:checkbox').attr('checked',true);
});
I assume you're using jQuery 1.6 or later.
If so, use the prop()[docs] method instead of the attr()[docs] method.
Then you should get the same behavior as if a user clicked the box.
jQuery('.sellectall').click(function(){
$('input:checkbox').prop('checked',true);
});
...or set the checked property manually:
jQuery('.sellectall').click(function(){
$('input:checkbox').each(function() { this.checked = true; });
});