use checkbox to hide/show elements

Ask the community
,
1

i can’t figure out why i can’t get this code to work. i am simply trying to check if a checkbox is checked and if so, hide/show an element. Thanks!

$w.onReady(function () { 

 
 if ($w("#checkbox1").checked) {
    $w('#uploadButton1').show;
 
} else {
    $w('#uploadButton1').hide;
 
}
2

There are 2 issues here:
First, show() and hide() are functions, so they should be called as such.

Second, this code only runs once, when the page loads. You should add an onChange event to your checkbox, and make the changes there:

$w('#checkbox1').onChange( (event, $w) => {   
    if ($w('#checkbox1').checked) {
        $w('#uploadButton1').show()
    } else {
        $w('#uploadButton1').hide()
    } 
});
3

thank you for your help!

Now my problem is that when a member leaves the page and comes back the checkbox is saved, but the button is hidden. will i have to query the checkbox data in order for the button to recognize if the checkbox is checked or not initially?

4

Question. When I place in the code, it won’t work, so I tried to remove the line of the onChange event and it luckily worked. However, upon refreshing the page, the checkbox lost the check. Can you please specify how to use the onChange event line? What exactly do I put inside the parenthesis? Thank you in advance.

5

This is an old post! You should better open your own post with your own individual issue.

By the way, the CODE given by Ohad seems to be good.

$w('#checkbox1').onChange( (event, $w) => {   
    if ($w('#checkbox1').checked) {
        $w('#uploadButton1').show()
    } else {
        $w('#uploadButton1').hide()
    } 
});

to understand the CODE a little better, you could also write it like this…

$w.onReady(function () { 
    $w('#checkbox1').onChange( (event, $w) => {   
        if ($w('#checkbox1').checked===true) {$w('#uploadButton1').show()} 
        else {$w('#uploadButton1').hide()} 
    });
});