Question

我正在尝试使用复选框来清除表单，但我不希望重置清除复选框本身。我使用的代码如下：

<input name="no_cage" id="no_cage" type="checkbox" value="1" onclick="this.form.reset();">

当我点击复选框时，它会清除表单，但不幸的是，它也会清除。

如果选中，则复选框还会更新数据库为1，如果未选中，则更新为0。所以我需要在表单中，它需要能够在已选中和未选中之间切换。

Answer 1

有两种方法可以做到这一点：

创建一个javascript函数来重置表单，然后再次选中复选框为true。

使用JQuery ：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
    if(this.checked) {
        document.getElementById("client").reset();
        this.checked = true;
    }
});
</script>
<form id="client">
    <input type="text">
    <input id="no_cage" type="checkbox" value="1"> CLEAR
</form>

使用Javascript ：

<script type="text/javascript">
function clearform(){
    if (document.getElementById("no_cage").checked == true){
        document.getElementById("client").reset();
        document.getElementById("no_cage").checked = true;
    }
}
</script>
<form id="client">
    <input type="text">
    <input id="no_cage" type="checkbox" onclick="javascript:clearform();"> CLEAR
</form>

OR，将复选框保留在表单

之外

<script type="text/javascript">
function clearform(){
    document.getElementById("client").reset();
}
</script>
<form id="client">
    <input type="text">
</form>
<input id="no_cage" type="checkbox" value="1" onclick="javascript:clearform();"> CLEAR

Answer 2

我不知道你是否想要这样，但我更改了如果选中复选框而不是清除形式的代码，否则它不会。这里是代码

<form id ="myForm" name = "test">
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
</form>


<input name="no_cage" id="no_cage" type="checkbox"  onclick="resetForm()">

<script type="text/javascript">

function resetForm()

{
if (document.getElementById("no_cage").checked == true)

{ 

document.getElementById("myForm").reset();

}

}
</script>

Answer 3

<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="checkbox"  id="box"onclick="myFunction()" value="Reset form">reset
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
document.getElementById("box").checked = true;
}</script>

希望有所帮助

使用复选框

3 个答案: