Question

如您所知，表单中的重置按钮无法将复选框重置为其初始状态。我怎么能用javascript或PHP或jquery或......来实现呢？这是我的代码：

<form method="POST">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset"> Reset </button>
<button type="submit"> Submit </button>
</form>

Answer 1

迭代所有输入元素并取消选中已检查的元素。

var allInputs = $( ":input" );

for(var i = 0; i < allInputs.length; i++) {

   if( $( 'input[type="checkbox"]:checked' ) )
      $( this ).prop('checked', false);
}

或者詹姆斯指出，这可以在一行中完成：

$( 'input[type="checkbox"]' ).prop('checked', false);

Answer 2

试试这个：

＆＃13;

var resetForm = function(){
    $('#form')[0].reset();
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" id="form">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset" onclick="resetForm()"> Reset </button>
<button type="submit"> Submit </button>
</form>

＆＃13;

Answer 3

为表单分配ID，然后：

document.getElementById("your form id").reset()

将复选框重置为初始状态

3 个答案: