如何使用 onClick 在表单元素中切换类？答案

【问题标题】：How to toggle a class within a form element using onClick?如何使用 onClick 在表单元素中切换类？
【发布时间】：2010-11-29 22:20:00
【问题描述】：

我正在寻找一些 JS 或 jQuery（插件或其他）来帮助我处理 jQuery 的验证插件用于表单字段中的表单验证的 class="required"。当单击删除按钮时，我需要能够将该类切换为不等于任何内容。

这里有更多关于为什么我需要能够切换该类“需要打开或关闭”的上下文：

1) 这是一个活动的多个参与者的注册表

2) 表单中有一个控件允许注册者“删除”一位与会者（如果她/他决定带 2 人而不是 4 人）。这将切换该与会者表单元素所在的 DIV 的可见性。我可以看到表单元素所属的参与者，因为我的 PHP 循环使用 first_name_1（对于第一个参与者）创建了它们，然后第二个参与者将拥有 first_name_2。然后每个 div_attendee_1 或 2 或 3 都有其表单字段，此计数器附加到每个字段的末尾。

3) 当一个 div 被渲染时，visibility="hidden" 我也重置了那个 div 中的表单元素。但我认为我还需要访问 class="required" 以将其呈现为 class=""。

最好的方法是什么？这是迄今为止我用来切换可见性和重置字段值的 jQuery：

验证：

 <script>
  $(document).ready(function(){
    $("#the_form").validate();
  });
  </script>

然后：

<script language="JavaScript">
  function showhidefield(hideablearea){
   document.getElementById(hideablearea).style.visibility = "hidden";
   var el = document.getElementById(hideablearea);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = '';
    }
    $('#' + hideablearea).hide().find("input").val("");
    $('#' + hideablearea).attr('disabled', true);
  }
</script>

我应该尝试使用 inner.html 重写元素吗？

谢谢！

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

改变

$('#' + hideablearea).hide().find("input").val("");

到

$('#' + hideablearea).hide().find("input").val("").removeClass("required");

【讨论】：

做到了！我知道这很简单……不过我是 jQuery 新手。谢谢！

【解决方案2】：

您可以使用 addClass 和 removeClass。您还可以使用 .css 并将值设置为某个值，或者将其设置为空，这将添加和删除样式而不是类...看起来您需要类级别。

【讨论】：