使用 jQuery 重置特定表單輸入

Question

我目前有一個收音機，如果單擊它會顯示一個額外的輸入字段，如果選擇另一個收音機則隱藏該輸入字段。 我想要完成的是，當單擊另一個無線電輸入時，我想清除輸入的任何值的文本輸入。

我還使用 MUI CSS 用於表單輸入上的浮動標簽，將.mui--is-empty class 附加到空字段和.mui--is-not-empty ZA2F2ED4F8EBC04ABB4C21A21DZ 到包含值的字段。

我嘗試了以下方法：

$(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的這個特定字段完全重置為 append 回到它。

這是我正在經歷的一個 gyazo，您可以看到浮動 label 的起始 state 以及它在清除時的反應。

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');
        }
    });
 });

但我擔心即使將值設置為 '' 它會在表單提交時返回任何內容嗎？ 如果沒有實際價值，我寧願這樣做。

Answer 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 語句中。 我認為您忘記為代碼關閉方括號。

我希望它有效。