Checkboxes and their associated labels

Checkboxes and their associated labels

  

Hi Everyone,
Doing some Mobile development in OutSystems. I have a list of checkboxes with labels. See screenshot:

Like all checkboxes, their associated labels should be clickable to check/uncheck the checkboxes. I was able to do this successfully on the first checkbox, but once as I add more checkboxes to the screen, they all check/uncheck regardless of which I select.
Is there a way to have labels associated with their checkbox, so the label text is clickable? 

I am used to something like this:
<input type="checkbox" id="whitebreadCheckbox"> <label for="whitebreadCheckbox">White Bread</label>

I was able to insert a "for" attribute on the label:

But unable to insert an 'Id" attribute on the checkbox:

I'm sure I am missing something simple, because this is pretty fundamental. Any help here?
Thanks everyone so much for your time and input. I really appreciate the help!

In mobile, the name of the element is its Id, so you don't need to add an id to it.
Just use its name where you need an id.

Cheers.

Eduardo Jauch wrote:

In mobile, the name of the element is its Id, so you don't need to add an id to it.
Just use its name where you need an id.

Cheers.

Dang, I'm afraid that is exactly what I have... Please see my screenshot of my form and let me know if you see anything strange:


My checkbox names are:




I have added the "for" attribute to both labels:


This is the outputted HTML (from chrome inspector):
<form data-form="" novalidate="" class="form card OSFillParent" id="SandwichForm">
<div data-container="" class="ThemeGrid_Width2" style="margin-left: 0px;">
<span><input type="checkbox" data-checkbox="" class="checkbox" id="whitebreadCheckbox" style="margin-left: 0px;"></span>
</div>
<div data-container="" class="ThemeGrid_Width10 ThemeGrid_MarginGutter">
<label data-label="" class="OSFillParent" for="whitebreadCheckbox" id="whitebreadLabel">White Bread</label>
</div>

<div data-container="" class="ThemeGrid_Width2" style="margin-left: 0px;">
<span><input type="checkbox" data-checkbox="" class="checkbox" id="wheatbreadCheckbox"></span>
</div>
<div data-container="" class="ThemeGrid_Width10 ThemeGrid_MarginGutter"><label data-label="" class="OSFillParent" for="wheatbreadCheckbox" id="wheatbreadLabel">Wheat Bread</label>
</div>
</form>

I noticed that when I remove the <span> tags, the labels function correctly... ODD.
Any ideas/suggestions! Thank you so much!


Solution

Hello Bryan,

I tested this output in the browser and it worked as expected.

I also did a small test in a mobile app, and it worked both in simulation (browser) as well as in OutSystems now, and it worked in both. But than I noticed that both label and checkbox were not separated through the containers, as you have.

So, I inserted containers and changed the order, to mimic yours.

But it still works...

Could be something else?

THis is the link of the small test, and I attached the oml.

https://eduardojauch.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ValidationTest/Screen1?_ts=636737526297803823

Cheers.

Solution

Eduardo Jauch wrote:

Hello Bryan,

I tested this output in the browser and it worked as expected.

I also did a small test in a mobile app, and it worked both in simulation (browser) as well as in OutSystems now, and it worked in both. But than I noticed that both label and checkbox were not separated through the containers, as you have.

So, I inserted containers and changed the order, to mimic yours.

But it still works...

Could be something else?

THis is the link of the small test, and I attached the oml.

https://eduardojauch.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ValidationTest/Screen1?_ts=636737526297803823

Cheers.

Thank you for your time and reply!
I ended up creating a new screen and doing the same exact setup which is now working fine. So I scrapped the original. I must have done something incorrectly on the first go and ServiceStudio didn't like it.
Thanks again for you help!