只將輸入字段設置爲空字符串，沒有選擇標記

Question

我有一個容器，它由幾個輸入標記和一個選擇標記組成。他們都有className，我們稱之爲「contact」。在jQuery中，我通過「聯繫」訪問所有人。此外，還有一個複選框會在您檢查它時禁用，當玩具取消選中時，它會清空輸入字段並刪除禁用。我想要做的事情我想要當我取消選擇複選框，我想設置輸入字段爲空字符串，我做了什麼，但我做了什麼包括選擇標記，我沒有設置爲空字符串

$("#showCheckoutHistory").change(function(event){ 
 
     if (this.checked){ 
 
      $(".contact").attr("disabled","disabled"); 
 
     } 
 
     else { 
 
      $(".contact").removeAttr("disabled"); 
 
      
 
      /* here is the problem, how can you empty the value of the \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t input ONlY. Without chnaging the className Javascript and \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t Adding Another name in the HTML 
 
      */ 
 
\t \t \t \t \t $(".contact").val(""); 
 
     } 
 
    });

<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label> 
 
    
 
    <div class="container"> 
 
    <input type="text" value="oo" class="form-control col-xs-10 contact"><br><br> 
 
    <input type="text" value="xx" class="form-control col-xs-10 contact"><br><br> 
 
     <input type="text" value="yy" class="form-control col-xs-10 contact"><br><br> 
 

 
    <select class="form-control col-xs-10 contact"> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option selected>C</option> 
 
    </select> 
 
     
 
    </div>

有錯誤，但我不知道它是什麼

Answer 1

在代碼中包括了$參考。這意味着添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在HTML

$("#showCheckoutHistory").change(function(event){ 
 
    if (this.checked){ 
 
    $(".contact").attr("disabled","disabled"); 
 
    } 
 
    else { 
 
    $(".contact").removeAttr("disabled"); 
 

 
    /* here is the problem, how can you empty the value of the \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t input ONlY. Without chnaging the className Javascript and \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t Adding Another name in the HTML 
 
    */ 
 
    $(".contact").each(function(i, el){ 
 
     if($(el)[0].nodeName != "SELECT"){ 
 
     $(el).val(""); 
 
     } 
 
    }); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label> 
 

 
    <div class="container"> 
 
    <input type="text" value="oo" class="form-control col-xs-10 contact"><br><br> 
 
    <input type="text" value="xx" class="form-control col-xs-10 contact"><br><br> 
 
    <input type="text" value="yy" class="form-control col-xs-10 contact"><br><br> 
 

 
    <select class="form-control col-xs-10 contact"> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option selected>C</option> 
 
    </select> 
 

 
    </div> 
 

 
</div>

Answer 2

對不起，我沒有足夠的信譽發表評論。 我測試了你的代碼，並且可以很好地工作。 您錯過了在stackoverflow代碼片段中選擇jquery。 請檢查下面的代碼。 如果即使添加jquery腳本後仍然無法運行，請告訴我您使用的jQuery版本。 （不要忘了添加jquery cdn或在代碼片段編輯器中選擇jquery庫）

如果你想保留選擇元素的選擇，請刪除像下面那樣的聯繫人類。

$("#showCheckoutHistory").change(function(event){ 
 
     if (this.checked){ 
 
      $(".contact").attr("disabled","disabled"); 
 
     } 
 
     else { 
 
      $(".contact").removeAttr("disabled"); 
 
      
 
      /* here is the problem, how can you empty the value of the \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t input ONlY. Without chnaging the className Javascript and \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t Adding Another name in the HTML 
 
      */ 
 
\t \t \t \t \t $(".contact").val(""); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label> 
 
    
 
    <div class="container"> 
 
    <input type="text" value="oo" class="form-control col-xs-10 contact"><br><br> 
 
    <input type="text" value="xx" class="form-control col-xs-10 contact"><br><br> 
 
     <input type="text" value="yy" class="form-control col-xs-10 contact"><br><br> 
 

 
    <select class="form-control col-xs-10"> <!-- I removed contact class in here to keep selection --> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option selected>C</option> 
 
    </select> 
 
     
 
    </div>