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>