Compare two multi-checkboxes

Ask the community
,
1

Hello,

I am trying to compare two sets of checkboxes to equal a total number of selected items. As there are 19 options but I only want them to be able to select 6 choices for a button to show up.

I have this code and it works great for one multi-checkbox but not for both as I have not even added the second multi-checkbox as am not sure how to compare them so they add to a total of 6 selected.

$w.onReady (() => {
 $w("#checkboxGroup1").onCustomValidation((value, reject) => {
 if (value.length == 6) {
       $w("#button1").enable();
 }
 else {
      $w("#button1").disable();
 }
});
});

Basically I need to code the following;
If checkboxgroup1 and checkboxgroup2 equals a total of 6 then show button1 .

Any help would be greatly appreciated!

Thanks so much!

2

Not sure what you are looking for…
-for the selected CheckboxGroup-Fields to get the selected field-number (length)?

-or to get the values out of the selected indices?

Oh wait! What? —> selectedIndices ???

What’s that ???

$w("#myCheckboxGroup").selectedIndices=[0,2]

Where did you find it?

Good luck :wink:

3

@russian-dima Thanks so much for the response.
Here is what I have done based on what you provided.

$w.onReady (() => {
let selectedOptionsA = $w("#checkboxGroup1").selectedIndices;
let selectedOptionsB = $w("#checkboxGroup2").selectedIndices;
if (selectedOptionsA.length && selectedOptionsB.length == 6){
       $w("#button1").enable();
 }
 else {
      $w("#button1").disable();
 }
});

However, it is still not working.

Here is what I have as an example. The column with First, Second, Third… is checkboxGroup1, then the column with A, B, C… is checkboxGroup2

What I want is when 6 items all together between both columns are selected then the Add To Cart button will enable.

Like this for example.

I am definitely missing something just not sure what.

Thanks so much for your help so far I definitely did not know about selectedIndices.

Talk soon!

4

Play a little bit with console.logging …like…

$w.onReady(()=>{
    let selOptA=$w("#checkboxGroup1").selectedIndices; console.log(selOptA)
    let selOptB=$w("#checkboxGroup2").selectedIndices; console.log(selOptB)
    console.log(selOptA).length
    console.log(selOptB).length
    if(selOptA.length && selOptB.length === 6){
        $w("#button1").enable();
    }else{
        $w("#button1").disable();
    }
});

Take a look into —> CONSOLE! (Press F-12 in Google-Chrome and navigate to —> CONSOLE, or use the integrated CONSOLE of your Wix-Editor)

Now you are able to investigate your own coded CODE.

5

@russian-dima Thanks again! I applied the code and checked the console on both Chrome and Wix and the arrays remain at 0 no matter how many I select. So that explains why it will never activate the button as it is not adding to 6.

The question now is why is it not counting.

Thanks so much

6

I applied the code and checked the console on both Chrome and Wix and the arrays remain at 0 no matter how many I select. So that explains why it will never activate the button as it is not adding to 6.
Exactly!!!
Well done…Sherlock Holmes :wink:

631×666 358 KB

The question now is why is it not counting.
And now try to figure out, how to achieve the next step and get more knowledge about this mystery.

This is the way of learning! Learning by doing :wink:

7

@russian-dima hahaha I like it. Ok I am on it I will tell you what I find out as I dig deeper into this Watson.

8

@russian-dima I just wanted to let you know I figured it out thanks to you. It took a bunch of trial and error but now my code is comparing both multi-checkboxes to activate the button only if the total is equal to 6.

Here is the code.

$w.onReady(function () {
$w("#checkboxGroup1").onChange(CartButtonEnableDisable);
$w("#checkboxGroup2").onChange(CartButtonEnableDisable);

});

function CartButtonEnableDisable() {
 let selOptA=$w("#checkboxGroup1").selectedIndices; console.log(selOptA)
 let selOptB=$w("#checkboxGroup2").selectedIndices; console.log(selOptB)
 if(selOptA.length + selOptB.length >= 6){
        $w('#button1').enable();
 } else $w('#button1').disable();

}
9

Well done! Lesson learned! :wink: