Question

我在表单中有字段集 复选框，对于每个字段集我都有一个重置按钮但是当我每次点击重置按钮时复选框重置..我应该使用什么JavaScript代码????

Answer 1

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>

Answer 2

在普通的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>

重置仅一个字段集的元素

2 个答案: