时间戳

首页 > 解决方案 > 清除未选中框上的相应输入？

jquery - 清除未选中框上的相应输入？

问题描述

寻找一种更改此脚本的方法，以便我可以在多个复选框/输入上使用它，而无需为每个复选框/输入正确设置一个单独的函数。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="child_div_1">MULTI SWITCH
<hr>
<div>
<input type="checkbox" class="apple-switch reveal" id="swm_box">
<span class="qntylabel">SWM 30</span>
<div class="part">
<input type="text" name="swm" id="swm" class="qnty" placeholder="QTY" pattern="\d*" value="test1"/>
</div>
</div>

<div>
<input type="checkbox" class="apple-switch reveal" id="rc66_box">
<span class="qntylabel">RC 66</span>
<div class="part">
<input type="text" name="rc66" id="rc66" class="qnty" placeholder="QTY" pattern="\d*" value="test2"/>
</div>
</div>
</div>

<script>
$(function(){
    $("#swm_box").click(function(){
        if(!$(this).is(":checked")){ //checks if the checkbox/this is selected or not
            $("#swm").val(""); //empty the input value
        } else { } //nothing
    });
});
</script>

目前适用于第一次检查/输入以清除值。

但是它不适用于第二个，因为它是特定于 id 的。

http://jsfiddle.net/qpg7ut0j/8/

标签： jqueryhtml

解决方案

抱歉，我没看到你想要 jQuery。无论如何，这是一个javascript解决方案。基本上forEach在包含文本输入名称的数组上使用。我确信 jQuery 可以更短地做到这一点。

["swm","rc66"].forEach(
  el=>document.querySelector("#"+el+"_box").onchange=e=>{
    if(e.target.checked) {
      document.querySelector("#"+el).value="";
    }
  }
);
<input type="checkbox" id="swm_box"><br>
<input type="text" id="swm" value="test1"/><br>
<input type="checkbox" id="rc66_box"><br>
<input type="text" id="rc66" value="test2"/>

推荐阅读