Question

我可以在JS中执行此操作，但我开始使用JQuery，并且更愿意为此开发技能。

我收到了提醒消息[#CheckboxReminder]“勾选此复选框以表示您已检查过您的数据”。

然后我想勾选复选框[#IsConfirmed]时隐藏提醒消息，如果取消选中它，则将其恢复为原始状态。

页面将呈现，提醒消息设置为Visible或Hidden类;如果用户最近将其数据标记为“已检查”，则该消息将被隐藏（但如果他们愿意，欢迎用户再次选中该框）

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

请将此代码编码的最佳方式是什么？

如果这里有用，可以看一下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>

Answer 1

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

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

每次单击复选框时都会触发上述内容，但由于我们首先检查复选框是否确实已选中，否则将避免误报。

在JQuery中切换可见性

1 个答案: