Check a checkbox when another checkbox is checked

[Mylene]

Hey, everyone!

I need help again

I'd like to check a checkbox when another checkbox is checked and vice versa.

I have a submission form with virtual field. And if that field is checked I need to check the "Subscribed" checkbox field on the same datapage.

Thanks!

[Mathilda]

Just now, Mylene said:

Hey, everyone!

I need help again

I'd like to check a checkbox when another checkbox is checked and vice versa.

I have a submission form with virtual field. And if that field is checked I need to check the "Subscribed" checkbox field on the same datapage.

Thanks!

Hi Mylene,

I have a solution for you. Use the following script in the footer of the form:

<script>

document.getElementById("cbParamVirtual1").onchange= function()

{

if (document.getElementById("cbParamVirtual1").checked==true)
{
document.getElementById("InsertRecordPublished").checked=true;
}

else if (document.getElementById("cbParamVirtual1").checked==false)
{
document.getElementById("InsertRecordSubscribed").checked=false;
}
}
</script>

In my script the virtual field  has index "1", because my virtual field id the first one on the datapage. You may find more info about referencing virtual fields here

Also replace "Subscribed" with your fieldname.

[nightowl]

Hi Mylene,

You can also try this script:

<script>
var checkboxesToCheck = [
    // TODO: Add here the HTML IDs of checkboxes to check -->
    'InsertRecordPublished',
    'InsertRecordSubscribed',
    'cbParamVirtual2',
    'cbParamVirtual3',
];

var vfield = document.getElementById('cbParamVirtual1');
vfield.onchange = function ()
{
    checkboxesToCheck.forEach(
        function (id, index)
        {
            document.getElementById(id).checked = vfield.checked;
        }
    );
}
</script>

 

[TellMeWhy]

On 2/20/2017 at 3:46 AM, Mathilda said:

Hi Mylene,

I have a solution for you. Use the following script in the footer of the form:

<script>

document.getElementById("cbParamVirtual1").onchange= function()

{

if (document.getElementById("cbParamVirtual1").checked==true)
{
document.getElementById("InsertRecordPublished").checked=true;
}

else if (document.getElementById("cbParamVirtual1").checked==false)
{
document.getElementById("InsertRecordSubscribed").checked=false;
}
}
</script>

In my script the virtual field  has index "1", because my virtual field id the first one on the datapage. You may find more info about referencing virtual fields here

Also replace "Subscribed" with your fieldname.

Hi! I just want to update this code, so, users can use this with Responsive Enabled. Re: https://howto.caspio.com/datapages/ajax-loading/

<script type="text/javascript">
document.getElementById("cbParamVirtual1").addEventListener('change', function(event) {
	
	if (document.getElementById("cbParamVirtual1").checked==true){
			document.getElementById("InsertRecordPublished").checked=true;
	}

	else if (document.getElementById("cbParamVirtual1").checked==false){
			document.getElementById("InsertRecordSubscribed").checked=false;
	}
  
});
</script>

 

 

 

[techguy]

Hello Tellmewhy,

 

If I have 3 checkboxes (not virtual fields) in a submit form, and I only want one to be able to be selected at a time..

checkboxA

checkboxB

checkboxC

 

What script would work?

 

[Queso]

Hi @techguy, 

We can wait for a script but as I checked, that condition is possible to create using the Rules feature of a DataPage wherein you will create 3 rules. Here is the setup that I created:

 Structure of checkbox elements in a form:

 

1st rule: 

2nd rule:

3rd rule: 

 

 

 

[autonumber]

Hello @techguy - just to add to @Queso's answer, you may also check the links below to know more about conditional forms and how they can be used in DataPages.  

https://www.youtube.com/watch?v=T_Ivf-oqiQg

https://www.youtube.com/watch?v=zG-LT6qOihQ

https://howto.caspio.com/datapages/forms/conditional-forms/