在 JQuery 中切换可见性

Question

在 JQuery 中切换可见性

javascriptjquerytoggle

4

我可以用JavaScript实现这个功能，但我现在开始使用JQuery，并希望提高我的技能。

我有一条提示信息[#CheckboxReminder]：“勾选此复选框以指示您已经检查了您的数据”。

我想在复选框[#IsConfirmed]被选中时隐藏提示信息，并在它再次取消选中后恢复到原始状态。

该页面将以可见或隐藏的类呈现提示信息；如果用户最近标记他们的数据为“已检查”，则该消息将被隐藏（但是欢迎用户再次选中复选框）。

我相信JQuery的toggle()可以做到这一点，但我读到说这取决于设置#CheckboxReminder样式的方式以指示其可见性，而且我也读到说toggle()可能会与#IsConfirmed复选框不同步——例如快速双击。也许我应该用toggle(FunctionA, FunctionB)，并让FunctionA设置复选框状态，而FunctionB取消它，而不是允许点击来设置它？

请问最好的编码方式是什么？

如果有用的话，以下是HTML的一个示例：

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

- Kristen

听起来你不想使用一个切换按钮，而是根据复选框是否被勾选来设置提醒的可见性。 - Thomas

TOGGLE()的吸引力在于它会记住初始状态，并且第二次调用会将其重置为该状态（而不仅仅是使其可见）。至少，这就是我认为toggle()所做的事情！ - Kristen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Petrioli · Accepted Answer

在显示/隐藏消息之前，只需检查复选框是否确实更改了值。

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

以上代码将在每次复选框被点击时触发，但由于我们首先检查复选框是否确实被选中，因此可以避免错误的肯定结果。