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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With