use checkbox to show button

Ask the community
, ,
1

Hello, I want to know what code use for show a button when members check the checkbox. I was watching old post and code, but it wasnt working. If it can be two checkbox its betters. Thanks

2

You want to show a button when a checkbox was checked?

When do we know, if a checkbox was checked? Perhaps when some changes were done the first time, right? That means…

$w.onReady(function () {
  $w("#checkbox1").onChange((event) => {
    let isChecked = $w('#checkbox1').checked;
    if(isChecked===true){
      //usecase if checkbox is checked
      console.log("Checkbox is checked")
    }
    else{
      //usecase if checkbox is unchecked
      console.log("Checkbox is unchecked")
    }
    console.log(isChecked)
  });
});

You will get the result in the CONSOLE. Use the console to see it.

3

Okay, but this code is only for know if checkbox was checked right? What I have to add for show the button?

4

You will have a button somewhere on your page, let us say the butten has the following ID —> “myButton1”.

Show & hide without animations
$w(‘#myButton1).show()
$w(’#myButton1).hide()

Show & hide with animations
$w(‘#myButton1).show(‘fade’)
$w(’#myButton1).hide(‘fade’)

Other animations:
‘float’
‘fly’
‘bounce’
and so on…


$w.onReady(function () {
   $w("#checkbox1").onChange((event) => {console.log(isChecked)
     let isChecked = $w('#checkbox1').checked;
     if(isChecked===true){
       $w('#myButton1).show('fade')
       console.log("Checkbox is checked")
     }
     else{
       $w('#myButton1).hide('fade')
       console.log("Checkbox is unchecked")
     }
   });
});
5

Here a similar example, but instead of HIDE & SHOW using ENABLE & DISABLE…
https://russian-dima.wixsite.com/meinewebsite/enable-button-check

6

@russian-dima I did but it told me error with ‘fade’

7

@aaleaguecontact I can’t help you without seeing your current code.

8

$w.onReady( function () {
$w( “#checkbox1” ).onChange((event) => {console.log(isChecked)
let isChecked = $w( ‘#checkbox1’ ).checked;
if (isChecked=== true ){
$w( '#myButton1).show()
console.log( “Checkbox is checked” )
}
else {
$w( '#myButton1).hide()
console.log( “Checkbox is unchecked” )
}
});
});
with this tell me that $w( '#myButton1).show() is not a valid selector with hide too

9

Okay nothing I fixed I did an error $w( ’ #Button1 ).show()

10

Can it be with two checkbox? I mean you have to press two checkbox for show the button

11

My fault. There was missing —> ’ <— at the end.

$w('#Button1').show()
12

Yes, everything can be done :wink:.
Now it’s on you to figure out, how it could work with 2x CheckBoxes.

13

@russian-dima Okay I will try it haha, I hope I find , thanks for the help

14

@aaleaguecontact Little hint for you…

let isChecked1 = $w('#checkbox1').checked;
let isChecked2 = $w('#checkbox2').checked;

if(isChecked1===true ....add some code here to get your wished result...){ }
15

@russian-dima
AAL
1s ago
Hmm but so I have to create two of this: $w( " #checkbox1 " ).onChange((event) => {console.log(isChecked) for checked1 and checked2

16

@aaleaguecontact

$w.onReady(function () {
     $w("#checkbox1, #checkbox2").onChange((event) => {console.log(isChecked)
         let isChecked1 = $w('#checkbox1').checked;
         let isChecked2 = $w('#checkbox2').checked;

         if(isChecked1 && isChecked2){
             $w('#myButton1').show('fade')
             console.log("Checkboxes 1&2 are checked")
         }
         else{
             $w('#myButton1').hide('fade')
             console.log("One or both Checkboxes are unchecked")
         }
    });
});
17

I did that

$w.onReady(function () {
   $w("#checkbox2").onChange((event) => {console.log(isChecked2)
 let isChecked1 = $w('#checkbox1').checked;
 let isChecked2 = $w('#checkbox2').checked;
 if(isChecked1===true && isChecked2===true){
       $w("#button14").show()
       console.log("Checkbox is checked")
     }
 else{
       $w('#button14').hide()
       console.log("Checkbox is unchecked")
     }
   });
});

And more or less its working, but if I do the check box in this orther: Checkedbox 2 after checkedbox1 is not working. If I do in the normal way its working

18

Take a look onto my given code one more time!
Did you perhaps forget something?

Did you copy and paste? I think not, that means something gone wrong and you forgot to add or modify some code-parts.

Your code…

$w("#checkbox2").onChange((event)=>{ ........

My code…

$w("#checkbox1, #checkbox2").onChange((event)=>{ .....
19

@russian-dima Upps, sorry, yes now its working, thanks so much :grinning:

20

@aaleaguecontact Do not forget to like it, if you really liked it :wink: