取消选中复选框时清除特定的表单元素答案

【问题标题】：Clear specific form elements when checkbox is unchecked取消选中复选框时清除特定的表单元素
【发布时间】：2012-03-24 01:52:47
【问题描述】：

谁能给我一个基本示例，说明在未选中复选框时如何清除特定表单输入（每个都有自己的唯一 ID）？我已经尝试了一些解决方案，但似乎无法让它可靠地工作。我只需要在未选中该框时才发生这种情况，这似乎给我带来了问题。

【问题讨论】：

哪一部分给你带来了麻烦？
给我们看一些代码。什么不工作？

标签： jquery forms input checkbox

【解决方案1】：

一个粗略的例子可能是......

<input type='checkbox' id='clear_text' />
<input type='text' id='text_box' value='Contents' />
<script>
$(function(){
    $("#clear_text").click(function(){
        if(!$(this).is(":checked")){ //checks if the checkbox/this is selected or not
            $("#text_box").val(""); //empty the input value
        } else { } //nothing
    });
});
</script>

【讨论】：

click（和change，这可能是更好的选择）事件在checked 状态改变后触发；所以“如果它被选中，那么我们知道点击将'取消选中'”是不正确的。此外，this.checked 工作得非常好 - 不需要$(this).is(':checked')。
是的，我认为那是我的原始代码，不久后我将其编辑了。我也有点喜欢 $(this).is(":checked") 语法。它读起来很好:)
喜欢这种语法并不意味着它没有必要。你最终会编写更多代码——即创建一个对象并执行一个函数调用——以获得零收益。
这个答案对我来说非常有效。其他的工作也很好，但与其他一些 javascript 发生冲突。谢谢！

【解决方案2】：

在复选框的 onClick() 中，调查复选框的值，然后执行您希望执行的任何操作，包括清除表单。这是否满足您的需求？

【讨论】：

【解决方案3】：

非常简单的示例，让您入门。使用 jQuery 1.7.1。 http://jsfiddle.net/fPKX8/

HTML：

<input id="in1" name="in1" value="pizza" /><br />
<input id="in2" name="in2" value="chips" /><br />
<input id="in3" name="in3" value="beer" /><br />

<input id="check1" name="check1" type="checkbox" />

jQuery:

$('#check1').on('click', function () {
    if (!$(this).is(':checked')) {
        $('#in1, #in2').val('');
    }
});

【讨论】：

【解决方案4】：

$(document).ready(function(){
    $('#chk').live('change',function(){
     if(!$(this).is(':checked'))
       $('input').val('');              
    });
});

这是工作小提琴JSFiddle

【讨论】：

我不得不使用另一个发布的解决方案，因为这与#chk 的其他一些 js 冲突。但开箱即用，这完全符合预期。感谢您的宝贵时间！