使用複選框清除表單

我正在嘗試使用複選框來清除表單，但我不想重置清除複選框本身。我使用的代碼如下：使用複選框清除表單

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

當我點擊複選框清除它的形式很好，但不幸的是，也很清楚自己太。

該複選框還會更新一個數據庫，如果選中，則爲1，否則爲0。所以我需要它在表單中，它需要能夠在選中和未選中之間切換。

來源

2016-09-19 John Higgins

使用複選框表單標籤 –

的你會如何再次復位形式，如果複選框選中留了下來？ –

該複選框也更新一個數據庫，如果選中，則爲1，如果未選中，則爲0。所以我需要它在表單中，它需要能夠在選中和未選中之間切換。 –

有兩種方法可以做到這一點：

創建一個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

來源

2016-09-19 09:36:46 Prakash

您的第一個選項部分工作，但不允許我取消選中該複選框。 –

你是對的，那應該工作 – Prakash

第一個選項很好。我還有一個問題，其中還有一個從數據庫中提取數據幷包含所選選項的選擇輸入。清除複選框不會刪除選定的選項。我是否需要將此作爲新問題發佈，還是可以在此處添加它？ –

我不中不知道你是否想這樣做，但我改變了代碼，如果複選框被選中而不是清除，那麼它不會。下面的代碼

<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>

來源

2016-09-19 09:53:01 LearnerMan

<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>

希望它有助於

來源

2016-09-19 10:20:33

使用複選框清除表單

回答

相關問題