CalcBuilder Forum

Show div with id upon checkbox select

User dhoeke 2026-02-02 08:06:45

I found an earlier discussion about this subject and like to use this show/hide option.
In the form layout I have a form inside a div with an id "gemiddelde"
I have a checkbox named "checktoshow"
Then I have this in JS functions 'executed on loaded page' tab:

//hide by default
CB("#gemiddelde").hide();

CB("input").change(function(){
//hide by default again
CB("#gemiddelde").hide();
//show if checked
if(CB(this).is(':checked'))
CB("#gemiddelde").show();
});

The hiding part works. But the showing does not work. I tried changing "input" to "checktoshow" but that did not work. Can you see what to change?

Thanks in advance.

Moonsoft support 2026-02-02 09:17:25

Hi,
your code seems ok, although you're attaching the event to every input on the page. A best way to restrict the event would be to assign the change function to your specific checkbox, for ex, if your field is named 'checktoshow', the selector could be

CB("")

Anyway, the code above should be working when clicking on the checkboxes (the other fields won't, as they can't be 'checked'). If you have problems with the behaviour, you can use the debugger and console of your browser to launch the script line by line and so find out which is the non-working part or conflicts with other scripts of your page. Some logs can also be of help to show at the console what's going on inside your function (or if it's being called).


//hide by default again
console.log("I'm in the event");
console.log("I'm checked?",CB(this).is(':checked'));

.....


Hope this helps, regards
Silvia Martín
Moonsoft Team

User dhoeke 2026-02-02 09:24:59

Thanks a lot. When I use this

CB("").change(function(){

instead of this

CB("input").change(function(){

Then it works. Not sure why, but perfect for now.

Regards, Dennis

Moonsoft support 2026-02-02 09:33:00

Perfect, thanks for sharing!
We close the ticket with this solution then.

Best regards
Silvia Martín
Moonsoft Team

...
Support/development 10 hours

Get a bigger amount of hours for more complex tasks and get a 10% discount

Buy now!
...
CalcBuilder

Create dynamic calculators

Buy now!