取消選中某些復選框后重置表單

Question

我想在初始選擇后取消選擇第一個字段集中的復選框后重置表單。

如何使用 vanilla JavaScript 實現這一目標？

 <form> <fieldset> <label><input type="checkbox" name="foo">Apples</label> <label><input type="checkbox" name="foo">Oranges</label> </fieldset> <fieldset> <label><input type="radio" name="bar">Red</label> <label><input type="radio" name="bar">Blue</label> </fieldset> </form>

Answer 1

您可以為每個復選框添加一個單擊事件處理程序，並檢查當前復選框是否被選中。 如果沒有，請檢查之前是否檢查過其中任何一個，如果是，請使用form.reset()重置表單。

 const checkboxes = document.querySelectorAll("input[type=checkbox]"); const form = document.querySelector("form"); var checkedOne = false; Array.prototype.slice.call(checkboxes).forEach(function(checkbox) { checkbox.addEventListener("click", function(e) { if (this.checked) { checkedOne = true; } else { if (checkedOne && !document.querySelectorAll("input[type=checkbox]:checked").length) { form.reset(); } } }); });

 <form> <fieldset> <label><input type="checkbox" name="foo">Apples</label> <label><input type="checkbox" name="foo">Oranges</label> </fieldset> <fieldset> <label><input type="radio" name="bar">Red</label> <label><input type="radio" name="bar">Blue</label> </fieldset> </form>

Answer 2

使用form.reset方法：

 let checkBoxes = document.querySelectorAll("input[type=checkbox]"); for (let checkbox of checkBoxes) { checkbox.addEventListener('change', change) } function change() { if(!checkBoxes[0].checked && !checkBoxes[1].checked){ document.getElementById('formID').reset(); } }

 <form id="formID"> <fieldset> <label><input type="checkbox" name="foo">Apples</label> <label><input type="checkbox" name="foo">Oranges</label> </fieldset> <fieldset> <label><input type="radio" name="bar">Red</label> <label><input type="radio" name="bar">Blue</label> </fieldset> </form>

Answer 3

使用 eventListener 的另一種方式

 var form = document.querySelector("form"); var fieldset1 = document.getElementById("fieldset1"); var fieldset2 = document.getElementById("fieldset2"); var box1 = fieldset1.elements[0]; var box2 = fieldset1.elements[1]; form.addEventListener('click', function(){ if( !box1.checked && !box2.checked) { let radio = document.getElementsByName('bar'); radio[0].checked = false; radio[1].checked = false; } })

 <form> <fieldset id="fieldset1"> <label><input type="checkbox" name="foo">Apples</label> <label><input type="checkbox" name="foo">Oranges</label> </fieldset> <fieldset id="fieldset2"> <label><input type="radio" name="bar">Red</label> <label><input type="radio" name="bar">Blue</label> </fieldset> </form>

Answer 4

假設頂部字段集中可以有更多復選框，其他字段集中可以有許多單選按鈕，您可以嘗試以下操作：-

 let masterCheckboxes = document.querySelectorAll("#master input"); masterCheckboxes.forEach(function(ele){ ele.addEventListener("change", function(){ var allUnchecked = true; masterCheckboxes.forEach(function(ele){ if(ele.checked) allUnchecked = false; }) if(allUnchecked){ document.querySelectorAll('.other input').forEach(function(ele){ ele.checked = false; }) } }); })

 <form> <fieldset id="master"> <label><input type="checkbox" name="foo">Apples</label> <label><input type="checkbox" name="foo">Oranges</label> </fieldset> <fieldset class="other"> <label><input type="radio" name="bar">Red</label> <label><input type="radio" name="bar">Blue</label> </fieldset> </form>