Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle Visibility in JQuery

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>
like image 823
Kristen Avatar asked Jan 23 '23 15:01

Kristen


1 Answers

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.

like image 179
Gabriele Petrioli Avatar answered Jan 31 '23 14:01

Gabriele Petrioli