使用 jQuery 重置特定的表单输入答案

【问题标题】：Resetting specific form input with jQuery使用 jQuery 重置特定的表单输入
【发布时间】：2020-04-11 15:00:40
【问题描述】：

我目前有一个收音机，如果单击它会显示一个额外的输入字段，如果选择另一个收音机则隐藏该输入字段。我想要完成的是，当单击另一个无线电输入时，我想清除输入的任何值的文本输入。

我还在将 MUI CSS 用于表单输入上的浮动标签，它将 .mui--is-empty 类附加到空字段，将 .mui--is-not-empty 类附加到包含值的字段。

我尝试了以下方法：

$(document).ready(function() {
    $('input[type="radio"]').click(function() {
        if($(this).attr('id') == 'tip-custom') {
            $('#show-me').fadeIn();           
        } else {
            $('#show-me').fadeOut();  
            $('input[name=tip-custom-value').val('');
        }
    });
 });

但这只是将值设置为“”，我需要完全重置此特定字段，以便 .mui--is-empty 附加回它。

这是我正在经历的一个 gyazo，您可以看到浮动标签的起始状态以及它在清除时的反应。

https://gyazo.com/b848a5855d27b2d6ebd9202bda7fabe9

有没有办法完全重置文本输入，就好像实际上没有值一样？

更新

我能够使用以下脚本完成我想要做的事情：

$(document).ready(function() {
    $('input[type="radio"]').click(function() {
        if(this.id == 'tip-custom') {
            $('#show-me').fadeIn();           
        }
        else {
            $('#show-me').fadeOut();  
            $('input[name=tip-custom-value').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
        }
    });
 });

但我担心即使将值设置为 '' 它会在表单提交时返回任何内容吗？如果没有实际价值，我更愿意这样做。

【问题讨论】：

小旁注； $(this).attr('id') 应该只是 this.id。直接访问该属性不需要这两个方法调用。
@Taplar 感谢您的提醒！
另外，在没有看到工作代码的情况下，我很难为明确的答案提出任何建议。但是我建议您尝试的一件事是在将值设置为空白后立即添加.trigger('change') 或.trigger('input')。如果 MUI 逻辑绑定到这些事件之一以添加/删除类，那么这应该会导致它重新评估。
你试过 $('#show-me input[type="text"]').val('');
@Taplar 在挖掘 mui.js 之后，.mui--is-empty 似乎是由以下处理程序触发的：function inputHandler() { var inputEl = this; if (inputEl.value.length) { jqLite.removeClass(inputEl, emptyClass); jqLite.addClass(inputEl, notEmptyClass); } else { jqLite.removeClass(inputEl, notEmptyClass); jqLite.addClass(inputEl, emptyClass) } }

标签： javascript jquery html css

【解决方案1】：

我不确定我的答案是对还是错，因为我无法检查部分代码。我认为您的代码中有错字。所以，我想我可以解决它。请检查此代码是否有效：

$(document).ready(function() {
    $('input[type="radio"]').click(function() {
        if(this.id == 'tip-custom') {
            $('#show-me').fadeIn();           
        }
        else {
            $('#show-me').fadeOut();  
            $('input[name="tip-custom-value"]').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
        }
    });
 });

错字在 else 语句中。我认为您忘记为代码关闭方括号。

我希望它有效。

【讨论】：