jQuery click() and changing the checked value - javascript

Behold the following jsfiddle: http://jsfiddle.net/RA3GS/4/
If you check on the checkboxes manually, you see that they say they are checked when they are checked and remain checked. However, if you push the test buttons you'll see that they either say they are checked, and then become unchecked, or say that they are not checked, and say they are checked.
Here is the problem: if I choose not to set the checked value before hand, the checkbox is correctly checked at the end, but the clicked function incorrectly states that it is unchecked. If I do set the checked value, then the click() function correctly states that the checkbox is checked, but then some other event (un)helpfully unchecks the checkbox at the very end.
The jsfiddle is a test; in my real implementation I will have no control over the click() function on the input element, so it is not merely a matter of changing the login in the click function.
This is the behavior I want, exactly:
You click on the button.
Any click() function is triggered and believes the element to be checked.
All other events believe the checkbox to be checked.
When everything is said and done, the checkbox is still checked.
Simpler example
I've put a simpler jsfiddle here:
http://jsfiddle.net/49jUL/
Without changing the status function, I want the console to display identically no matter which checkbox you check. Current output is:
clicking on manual
A tester received the following event change
Value: 100 Checked: true
A tester received the following event click
Value: 100 Checked: true
clicking on controller
A tester received the following event click
Value: 100 Checked: true
A tester received the following event change
Value: 100 Checked: false
I find it interesting that if I click on the manual radio button, change is called first and then click, whereas if I trigger click, click is called and then change.
Note that when I've tried calling it as $target.change().click() then it simply calls change, then click, then finally change again with checked set to false.

From my comment--
The checked field is a property, rather than an attribute, so I would recommend using the appropriate accessor and mutator for the "checked" status:
$('#checkBoxElId').prop("checked");
and
$('#checkBoxElId').prop("checked", true/false);
Alternatively you can use the is() function with the :checked pseudo selector to see if it's checked:
$('#checkBoxElId').is(':checked');
The "checked" attribute does not change after the initial loading of the checkbox. See the jQuery documentation on prop() for more information about the state of checkboxes.
EDIT: Solution
After finding a bug report explaining this behavior, I did a little experimentation with the workaround documented in the bug's comments: the use of triggerHandler("click") instead of calling click().
click() is just a shortcut for trigger("click"), which will trigger a matching event on all elements found by the selector, and will also invoke the native handler. triggerHandler("click"), OTOH, will only trigger the event for the first element found by the selector, and will prevent the default (native) behavior from occurring. It's the native behavior that is messing with the "checked" state of the checkboxes. By avoiding it, you get the desired behavior.
Here's an updated jsFiddle with my solution.

You can not be simply triggering the click on the check box, you need to verify the current status, and then act accordingly:
$('#pushbutton').on("click", function() {
var $obj = $('#myCheckBoxID');
$obj.prop('checked', !$obj.prop('checked'));
alert('now check is: ' + $obj.prop('checked'));
});
See this Fiddle Example!
EDITED
Followed improvement given by ThiefMaster on the first comment.

Related

Checkbox and onchange method usage

I have a table with some rows that have checkboxes on the first column where if user clicks, it calls some javascript methods that disable the other fields of the respective rows.
The structure of these inputs is this:
<input type="checkbox" name="ans_R2057321_Q2060122" id="ans_R2057321_Q2060122" value="2002241" onclick="matrix.disableFields(this, 'R2057321');recalculateRowFormulas('2057321'); alignTDs();" />
I implemented a link where when user clicks on it, it has to select all these checkboxes, so I did it this way:
function noQuoteAllRowsOfCurrPage(){
jQuery("input:checkbox[id^=ans_R]").each(function(i,e) {
jQuery(e).prop('checked', true);
});
}
This simply iterates in each checkbox on the screen whose id starts with ans_R, and then check the CB state to true. It does works, but the problem is that the javascript functions called on the onclick property of the input checkboxes aren't running. First thing I did was changing from onclick to onchange, which should be the correct way to do that, since the state of checkbox is changing, but somehow it doesn't work... any ideas what of what can I do?
JQuery's .prop() function does not trigger the change event. You either can
1 - Trigger the event manually
jQuery(e).prop('checked', true).trigger('change');
2 - Use the .click() function that will check the input, and trigger the event as well..
jQuery(e).click();
I found what I was missing and since I saw several people with the same problem, I think my solution can be helpful for others..
I just added a trigger for 'change'.
function noQuoteAllRowsOfCurrPage(){
jQuery("input:checkbox[id^=ans_R]").each(function(i,e) {
jQuery(e).click();
jQuery(e).prop('checked', true).trigger('change');
});
}

jQuery click event / event bubbling issues when trying to highlight an element & check a checkbox at the same time

Please have a look at this fiddle: http://jsfiddle.net/mrmartineau/53fkV/embedded/result/
The intended outcome is that when a .poll_option td is clicked, the background colour changes to pink & the checkbox is checked. Each option has different bugs, these are:
Option 1:
The problem I have is that on Option 1, when I click the checkbox itself, it does not check but everything else works fine. By that I mean that when I click the label & the <td> the outcome is correct. It seems that the event is not bubbling correctly..
Option 2:
For this one, I tried another solution (removed the .toggle() method) and tried to figure out what element is actually being clicked (console.log(e.target.nodeName);) and now I can click the checkbox but not the label, rather the label does not make the event work.
Could you please have a look at my code & see where I'm going wrong because I'm sure it can't be this hard...
Cheers
Proposed simpler solution:
$('.poll_option.one td').click(function (e) {
$(this).toggleClass('highlight');
$(this).find('input').prop("checked", $(this).hasClass("highlight"));
console.log(e.target.nodeName);
// weird that clicking the label does not naturally propagate
// the click event to the parent
}).find("label").click(function () {
$(this).closest("td").click();
});
​Demo.

After execution of onclick-callback the 'checked' state is reset

This drives me mad. I just can't understand it.
I wrote a filter-function based on checkboxes and clicking on their labels. I'm checking the 'checked' state of checkboxes and show mathed elements of the list (the rest elements are hidden). I use 3rdparty plugin that stylizes checkboxes (cut from example) and makes checkboxes checked while other onClick event does the filtering.
The problem is that after 'checked' state is successfully set inside a callback-function it "suddenly" becomes reset! I can't understand why that happens.
I implemented the base logic (without stylizing) here: http://jsfiddle.net/3Xtuh/13/
and ask all to help me solve this, please.
The problem is that you are invoking the click event manually, and then when your function is done running, the default click event is invoked.
By passing the event variable to your click handler and calling event.preventDefault(); fixes this behavior.
See example here: http://jsfiddle.net/3Xtuh/14/
The HTML label will check the associated checkbox even if it´s hidden (using CSS) so there´s no need to reinvent the wheel.
You should use the change() event. Try this demo and view your console.
It's default browser behavior that's messing your js script. By default, clicking on a label that is either wrapped around checkbox or have valid for attribute set, is toggling checked state of that checkbox.
You've attached custom onclick handler on labels.
So what's going on is that when clicking on a label? Your click handler gets fired (in in you alter state of target checkbox), and then

ExtJS ToolBar radio group change menu item manually

How to manually change selected radio item in "Radio Options" menu?
http://www.extjs.com/deploy/dev/examples/menu/menus.js
Don't pay attention on id absent (for menu), I just want to know which method should be use.
I tried setActiveItem but it didn't work.
Thanks
I might misunderstand your question, but what about using the method
setValue( value {String/Boolean} ) : Ext.form.Field
"Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio of the same name whose value is the value specified."
I would think that the radio group would make sure that the already checked button would be unchecked.
finally I found a solution:
Ext.getCmp("our_id").menu.items.get(index).setChecked(true, true);
I found that this method has some issues, for example, setChecked works fine
from firebug (only needed item checked), but if it run from javascript file, it
doesn't work like radiobutton, but like checkbox.
For this case, you should run across all items and explicitly checked and unchecked them.
Also be sure, to suppress emit signal (second parameter in setChecked method), to avoid recursion.

Should I check if the 'disabled' attribute exists before removing it?

I had a requirement where I need to clear off the "select all" checkbox in case user manually deselects any of the data rows.
This has been accomplished by detecting this during an onRowSelect (jqgrid event) event.
The code snippet is as below and works as expected.
onSelectRow: function(){$("input:checkbox[id='cb_jqg']").removeAttr('checked');}
The thing I wonder about is whether I should check the checkbox for already selected before I clear it off or can I simply clear it (as it does not have any impact) as done above.
Is there any performance / code ethic issues with the syntax I used?
Adding a check before setting the value will be slower than just arbitrarily setting them all simply because it has to do the check.
Ethically, it's not gonna throw an error, so all's fair in love and coding, right?
This looks like you have multiple checkboxes with the same id. This is invalid in HTML. You could instead use the same name for these checkboxes.
Also, the more standard way of setting the checkedness of a checkbox is simply setting the checked property of the checkbox element to true or false, rather than rely on jQuery's attribute handling methods.

Categories

Resources