Examples of three ways to deselect radio
- 2020-03-30 01:02:01
- OfStack
This article provides three ways to uncheck radio, with the following code examples:
This article relies on jQuery, the first of which is implemented using jQuery, the second is implemented using jQuery, and the third is implemented using JS and DOM.
This article relies on jQuery, the first of which is implemented using jQuery, the second is implemented using jQuery, and the third is implemented using JS and DOM.
<!DOCTYPE HTML>
<html>
<head>
<title> Three ways to deselect a 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, either way
//$browsers.removeAttr("checked");
$browsers.attr("checked",false);
});
//
$byhide.click(function(e){
//Switch to a hidden field, either way
//$("#hidebrowser").attr("checked",true);
$("#hidebrowser").attr("checked","checked");
});
//
$remove.click(function(e){
//Go directly to the DOM element and remove the attribute
//If you don't use jQuery, you can port this approach
var checkedbrowser=document.getElementsByName("browser");
//
var len = checkedbrowser.length;
var i = 0;
for(; i < len; i++){
//You must first assign false and then remove the property
checkedbrowser[i].checked = false;
//You can do this without removing the property
//checkedbrowser[i].removeAttribute("checked");
}
});
});
</script>
</head>
<body>
<p> Which browser do you prefer? </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="Opera">Opera<br />
<br />
<input type="button" id="cancel" value=" Deselect mode 1" size="20">
<input type="button" id="byhide" value=" Deselect mode 2" size="20">
<input type="button" id="remove" value=" Deselect mode 3" size="20">
</form>
</body>
</html>