Forum | Appery.io

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?

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

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

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

Hi Andy,

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

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?

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.

How would you find the status of multiple checkboxes?

Hello Logan,

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