Check if a checkboxed is checked!

[Andrew Peacock]

OK, i'm going nuts on this one. I have a single checkbox added to a one page app. Nothing special. I'd like to find out when that checkbox is checked/unchecked, and show/hide another conponent as a consequence.

How do I do that? I've tried a large number of possible combinations of how to capture the checkbox value, and none have worked:

if ($('input[name=chkbxSaveAsTrigger]:checked').val() == "newtrigger") {

if ($('input', Appery("chkbxSaveAsTrigger")).prop("checked")) {

if ($("input[name=chkbxSaveAsTrigger]").attr ("checked")) {

if ($('input[name=chkbxSaveAsTrigger]').is(':checked')) {

if ($("input[name=chkbxSaveAsTrigger]").hasClass('ui-checkbox-on')) {

Any ideas?

[Illya Stepanov]

Hi Andrew,

Please follow these steps:

1. Add checkbox on the page. http://prntscr.com/35nwv0/direct

2. Select goal checkbox in design mode. http://prntscr.com/35nxgd/direct

3. Add JavaScript "click" event handler and populate it by following code: http://prntscr.com/35nztk/direct
   precode
   var checkBox = jQuery(this).find("input[type='checkbox']");

   //This is your checked value.
   var checked = checkBox.prop("checked");

   //Output to console to check it out.
   console.log("checked = " + checked);
   /code/pre

[Andrew Peacock]

Hi Illya,
Thanks for getting back to me. OK, I'm not getting true/false console logs which is great!

However, they're back to front! It's as if the checkbox is starting unchecked, the click event fires, the 'false' is displayed, and only then is the checkbox being actually checked. I think it's because the actual HTML checkbox is checked by some jquerymobile JS, which is running after my code?

I've changed the trigger to be the "value change" event, and it works fine. Just thought I'd share that for the benefit of anyone reading this.

Andy

[Andrew Peacock]

And my final code is as follows:

Event component: the checkbox.
Event trigger: value change:

Javascript:

var checkBoxGroup = jQuery(this).find("input[name='chkbxGroupSaveAsTrigger']");
console.log("value = " + checkBoxGroup.val());

I'm not sure about the trigger in the event that you might have multiple checkboxes available, but this worked for my specific scenario.

Andy

[Kateryna Grynko]

Hi Andy,

Thank you for sharing this! Let us know if any help is needed.

[Matthew Huang]

I also want to find the way to get the status of a single checkbox: true/false?

I can't find the answer from this post. Can someone help me?

[Alena Prykhodko]

Hi Matthew,

You can check this way:

pre
var checkboxValue = $('input[name=mobilecheckboxgroup]').is(':checked');
if (checkboxValue === true){
alert ("true");// returns true when checked
}else{
alert ("false");//returns false when unchecked
} /pre

Where mobilecheckboxgroup - checkbox group name

I have tried this action on button click event and it works.

[Logan Wells]

How would you find the status of multiple checkboxes?

[Evgene Karachevtsev]

Hello Logan,

You can do this with JS code. You may change the code provided above to fit your needs.