Select all checkboxes issue(jQuery) - javascript

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; });
});

Related

.attr('checked', true)Will Not Re-add on button click

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.

How to share input value and select option value in a field from Tab view?

I have a Tab option like the following image. Total view will share fixed value for both filed of first tab view.
But when I will take value from datepicker or writing manually in input text field, It will not take the fixed value of Total view.
When You clicked on button just make the radio type 'false' . So when you return back radio option will be always unchecked either you click it again.
Just add following jQuery code at the end of your function.
$('input[type="radio"]').each(function () {
$(this).attr('checked', false);
});

Using jQuery toggle to hide/show form submit button based on checkbox being checked - how to set submit button toggled off by default?

I have a form that I'm using whereby I would like to require a checkbox ('terms') to be checked in order to toggle the Submit button ('checkout-submit') on. I have it working just fine once you check the checkbox and then uncheck, etc.
But, by default the Submit button is showing. I'm unsure in my code how to ensure that the Submit button is toggled off when the page loads.
$('#terms').click(function() {
$("#checkout-submit").toggle(this.checked);
});
Another approach is to put the boolean attribute required on the checkbox, like so
<input type="checkbox" required>
Then if the user attempts to submit without checking the box, a native html5 dialog (which looks quite nice) appears, saying you have to check the box to proceed. The user can hit submit as many times as they like, but nothing will happen until the checkbox is checked. Note that all of this has to be inside a form element.
You can do something like this:
$('#your_checkbox').click(function() {
if ($(this).is(':checked')) {
$('#your_button').removeAttr('disabled');
} else {
$('#your_button').attr('disabled', 'disabled');
}
});
//set it to disabled at load
$('#your_button').attr('disabled', 'disabled');
Fiddle http://jsfiddle.net/t70cc43o/1/

Need to find where my radio option CHECKED value gets changed

Is there way that i could identify where a radio option value gets changed, either thru watch expression on firebug or inspect element ?
i am remote debugging a website and there are 4 radion buttons in the website. We set the CHECKED property for my 4th option as true, it gets checked. But after a sometime(1 sec) my first option gets selected automatically. There are too many javascript code involved and i am not sure where to check.
So is there any way i can do a debug-BREAK when a watch expression fires or any other way to debug this?
You can do this using jquery:
$('input[type=radio][name="inputName"]').on('change',function(){
//#myForm is the id of the form that the radio box in
alert($('input[name="inputName"]:checked', '#myForm').val());
});
This will alert the new value of the radio box when changed JsFiddle

Javascript/Jquery Internet Explorer issue in showing divs upon click

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 )
...

Categories