復位元件

Question

我有不同的形式，併爲每個字段集複選框字段集我有一個復位按鈕，但是當我點擊復位按鈕，每一個複選框復位..什麼javascript代碼我應該使用？？？？

Answer 1

小提琴：http://jsfiddle.net/9MaLZ/10/

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>