Question

I can do this in JS, but I’m beginning to use JQuery and would prefer to develop skills for that.

I have a reminder message [#CheckboxReminder] “Tick this checkbox to indicate you have checked your data”.

I then want to hide the reminder message when the checkbox [#IsConfirmed] is ticked, and restore it to original state if it is then unchecked.

The page will be rendered with the reminder message set to a class of either Visible or Hidden; if the user has recently marked their data as “checked” the message will be hidden (but user is welcome to check the box again if they wish)

I believe that JQuery toggle() can do this, but I read that it depends on the way that the #CheckboxReminder style is set to indicate visibility, and I have also read that Toggle() could get out of sync with #IsConfirmed CheckBox – e.g. rapid double clicking. Maybe I should have toggle(FunctionA, FunctioB) and have FunctionA set the checkbox state, and FunctionB unset it – rather than allowing the Click to set it?

What’s the best way to code this please?

In case useful here’s an example of what the 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 has indeed changed value before showing/hiding the message.

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

The above will fire each time the checkbox is clicked, but since we first check if the checkbox is indeed checked or not it will avoid false positives.