This article provides three ways to uncheck radio, and the code examples are as follows:
This article relies on jQuery, the first and second methods are implemented using jQuery, and the third methods are implemented based on JS and DOM.
<!DOCTYPE HTML> <html> <head> <title>Three ways to uncheck radio button</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript"> $(function(){ // var $browsers = $("input[name=browser]"); var $cancel = $("#cancel"); var $byhide = $("#byhide"); var $remove = $("#remove"); // $cancel.click(function(e){ // Remove attributes, both ways are available //$browsers.removeAttr("checked"); $browsers.attr("checked",false); }); // $byhide.click(function(e){ // Switch to a hidden domain, both ways are available //$("#hidebrowser").attr("checked",true); $("#hidebrowser").attr("checked","checked"); }); // $remove.click(function(e){ // Go directly to the DOM element, remove attributes// If you do not use jQuery, you can port this method var checkedbrowser=document.getElementsByName("browser"); /* $.each(checkedbrowser, function(i,v){ v.checked = false; v.removeAttribute("checked"); }); */ // var len = checkedbrowser.length; var i = 0; for(; i < len; i++){ // You must first assign false, and then remove the attribute checkedbrowser[i].checked = false; // You can also do without removing the attribute //checkedbrowser[i].removeAttribute("checked"); } }); }); </script> </head> <body> <p> Which browser do you like? </p> <form> <input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""> <input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br /> <input type="radio" name="browser" value="Firefox">Firefox<br /> <input type="radio" name="browser" value="Netscape">Netscape<br /> <input type="radio" name="browser" value="Netscape">Netscape<br /> <input type="radio" name="browser" value="Opera">Opera<br /> <br /> <input type="button" id="cancel" value="Unselect method 1" size="20"> <input type="button" id="byhide" value="Unselect method 2" size="20"> <input type="button" id="remove" value="Unselect method 3" size="20"> </form> </body> </html>