只将输入字段设置为空字符串，没有选择标记

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>