Toggle Visibility in jQuery

Question

I can do this in JS, but I am starting to use jQuery and prefer to develop skills for this.

I have a reminder [#CheckboxReminder] "Check this box to indicate that you have verified your details."

Then I want to hide the reminder message when the [#IsConfirmed] checkmark is [#IsConfirmed] , and restore it to its original state if it is then not checked.

The page will be displayed with a reminder message set to the visible or hidden class; if the user has recently marked his data as “verified”, the message will be hidden (but the user can check the box again if they wish)

I believe jQuery toggle() can do this, but I read that it depends on how the #CheckboxReminder style #CheckboxReminder set to indicate visibility, and I also read that toggle() can go out of sync with #IsConfirmed CheckBox - for example quick double click. Maybe I would have toggle(FunctionA, FunctioB) and set Functionbox on the checkbox, and FunctionB on it, and not on the click to install it?

What is the best way to code this, please?

In the case of what is useful here is an example of what HTML might look like:

 <p>When the data above is correct please confirm <input type="checkbox" id="IsConfirmed" name="IsConfirmed"> and then review the data below</p> ... <ul> <li id="CheckboxReminder" class="InitHide OR InitShow">If the contact details above are correct please make sure that the CheckBox is ticked</li> <li>Enter any comment / message in the box above</li> <li>Then press <input type="submit"></li></ul> 

Answer 1

Just check if the checkbox really changed the value before showing / hiding the message.

 $('#isConfirmed').click( function(){ if ( $(this).is(':checked') ) $('#CheckboxReminder').show(); else $('#CheckboxReminder').hide(); } ); 

The above will work with every click on the flag, but since we first check whether the flag is really checked or not, this will avoid false positives.