CheckAll & CheckNone Feature

Ask the community
,
1

I just created a Page with Checkboxes. And I have one Checkbox that could activate all checkboxes and there is a checkbox does the other.

But my code is toooooo long… Could anyone think of a better coding for this feature?

Here is the link:
https://wix.to/SUCwBCI

Not so sure why is the code not working properly in above link. Anyway, Here are the codes:

export function checkbox1_click(event) {
if (!$w('#checkbox1').checked ) {
for (var i = 2; i<6; i++){
$w(`#checkbox${i}`).checked = true;}
$w('#checkbox6').checked = false;
}}
export function checkbox2_click(event) {
if ($w('#checkbox2').checked) {$w('#checkbox1').checked = false}
else {if ($w('#checkbox3').checked && $w('#checkbox4').checked && $w('#checkbox5').checked ){$w('#checkbox1').checked = true}
if (!$w('#checkbox2').checked) {$w('#checkbox6').checked = false}
}
}
export function checkbox3_click(event) {
if ($w('#checkbox3').checked) {$w('#checkbox1').checked = false}
else {if ($w('#checkbox2').checked && $w('#checkbox4').checked && $w('#checkbox5').checked ){$w('#checkbox1').checked = true}
if (!$w('#checkbox3').checked) {$w('#checkbox6').checked = false}}
}
export function checkbox4_click(event) {
if ($w('#checkbox4').checked) {$w('#checkbox1').checked = false}
else {if ($w('#checkbox2').checked && $w('#checkbox3').checked && $w('#checkbox5').checked ){$w('#checkbox1').checked = true}
if (!$w('#checkbox4').checked) {$w('#checkbox6').checked = false}}
}
export function checkbox5_click(event) {
if ($w('#checkbox5').checked) {$w('#checkbox1').checked = false}
else {if ($w('#checkbox2').checked && $w('#checkbox3').checked && $w('#checkbox4').checked ){$w('#checkbox1').checked = true}
if (!$w('#checkbox4').checked) {$w('#checkbox6').checked = false}}
}
export function checkbox6_click(event) {
if (!$w('#checkbox6').checked ) {
for (var i = 1; i<6; i++){
$w(`#checkbox${i}`).checked = false;}

}}
2

Hey Oliver!

A very useful feature in Corvid that can help you, in this case, is that you can address all the elements (components) of the same type like one.

let checkboxes = $w("Checkbox")

In this instance, the above line of code will create an array of checkboxes. Each item in this array would be a different checkbox from the page.

Now you can create an event to the “master checkbox” (checkAll) that will check all the boxes at once.
It should look something like this:

$w.onReady(function () {
   let checkboxes = $w("Checkbox")
   checkboxes.checked = false;
   $w('#checkAll').onChange(()=> {
      for (let i = 0 ; i < checkboxes.length; i++) {
         if (checkboxes[i].id !== 'checkAll') {
            checkboxes[i].checked = $w('#checkAll').checked;
         }
      }
   })
});

In this example, you have one checkbox that controls the rest instead of two checkboxes that gives false/true value separately. You can modify it if you still need two of them.
Here’s a working live example.

I hope it helps!
Let me know if it works for you.

Doron.