Javascript 仅重置一个字段集的元素

我有不同的字段集在表单中有复选框，对于每个字段集，我都有一个重置按钮，但当我单击重置按钮时，每个复选框都会重置。。我应该使用什么javascript代码？？？

Fiddle:

JS+jQ

// checking checkbox 1 for demonstration
$("#cb1").prop("checked", true);

// reset checkbox, closet to a reset button (up the dom)
$("#myform button").click(function(e) { 
    $(this).closest("fieldset").find(':checkbox').attr("checked", false);
}); 

// total reset
$("#totalrecall").click(function(e) {
    $(":checkbox").each( function() {
        $(this).attr("checked", false);
    })
}); 

// check them all
$("#iwantthemall").click(function(e) {
    $(":checkbox").each( function() {
        $(this).attr("checked", true);
    })
});  

HTML

<div id="myform">
    <fieldset>
        <input type="checkbox" id="cb1" />
        <button type="reset" id="cb1-reset">Reset</button>
    </fieldset>
    <fieldset>
        <input type="checkbox" id="cb2" />
        <button type="reset" id="cb2-reset" >Reset</button>
    </fieldset>
    <fieldset>
        <input type="checkbox" id="cb2" />
        <button type="reset" id="cb3-reset">Reset</button>
    </fieldset>
    <button type="reset" id="totalrecall">RESET ALL</button>
    <button type="reset" id="iwantthemall">RESET ALL</button>
</div>

重置
重置
重置
全部重置
全部重置

在纯javascript中，您可以使用如下内容。它将字段集中的所有复选框重置为默认选中状态，无论是选中还是未选中：

function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  do {
    el = el.parentNode;
    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  } while (el.parentNode)
}

function resetField(el) {
  var fieldset = upTo(el, 'fieldset');
  var input, inputs;
  if (fieldset) {
    inputs = fieldset.getElementsByTagName('input');
    for (var i=0, iLen=inputs.length; i<iLen; i++) {
      input = inputs[i];
      if (input.type == 'checkbox') input.checked = input.defaultChecked;
    }
  }
}

</script>


<form>
  <fieldset>
    <input type="checkbox" name="cb0" checked>
    <input type="checkbox" name="cb1">
    <input type="button" onclick="resetField(this);" value="Reset field">
  </fieldset>
  <fieldset>
    <input type="checkbox" name="cb2">
    <input type="checkbox" name="cb3" checked>
    <input type="button" onclick="resetField(this);" value="Reset field">
  </fieldset>
</form>

函数最多（el，标记名）{
标记名=标记名.toLowerCase（）；
做{
el=el.parentNode；
if（el.tagName.toLowerCase（）==标记名）{
返回el；
}
}while（el.parentNode）
}
功能重置字段（el）{
var fieldset=高达（el，'fieldset'）；
var输入，输入；
if（字段集）{
inputs=fieldset.getElementsByTagName（'input'）；
对于（var i=0，iLen=inputs.length；i请显示您的（相关）HTML。您可以在字段集中找到所有复选框，并设置
button.checked=button.defaultChecked；
以将其返回到默认的“chechedeness”（可能未选中，但这将允许默认选中某些复选框）.有没有jQuery？@Jens AndréKoch any how…@DavidThomas发布的一些行没有将它们重置为默认的选中值，它会（可能）只需全部取消选中。它应该检查checked属性，因为设置该属性会更改默认的选中值，但不应该更改复选框是否实际选中。如果选中默认值，则操作是“重置按钮时，每个复选框都重置”而不是“每个按钮都设置为未选中”。相应地更新了我的答案。还有Fiddle。有意思的编码：）RobG:你读了他问的问题吗？“只重置一个字段集的元素”！我想jQuery oneliner就是这样做的：
$（this）。最近的（“字段集”）。find（'：checkbox'）。attr（“checked”，false）；
：）@Jens AndréKoch–因此，您加载了4000行代码以配合它，但它仍然不像重置按钮那样工作。重置表单控件会将其设置回默认值。对于复选框，它可能会在默认情况下被选中。通过设置属性，您可能会更改默认值。您应该设置选中的属性在jQuery中，它是：
$（this.closest（'fieldset'）.find（'input[type=checkbox'））.each（function（）{this.checked=this.defaultChecked；}）；
一旦在纯JS中有了字段集，它就可以是
[].slice.call（fieldset.queryselectoral（'input[type=checkbox]'））.forEach（function（el）{.checked=el.defaultChecked；}）
但我不太喜欢代码高尔夫。我喜欢将defaultChecked状态考虑在内的jQuery解决方案。+1