views:

924

answers:

1

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>
+1  A: 

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 is 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..

Gaby
Thanks. Won't that SHOW #CheckboxReminder - even if its initial state was hidden?
Kristen
Ah ... have now read JQUery DOCs for `show` "[show()] is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially". Perfect.
Kristen