Examples of three ways to uncheck the radio button

Author：Eve Cole Update Time：2025-02-15 11:48:02

This article provides three ways to uncheck radio. The code examples are as follows:

This article relies on jQuery. The first and second methods are implemented using jQuery, and the third method is based on JS and DOM.

Copy the code code as follows:

<!DOCTYPE HTML>

<html>

<head>

<title>Three ways to uncheck radio buttons</title>

</script>

$(function(){

var $browsers = $("input[name=browser]");

var $cancel = $("#cancel");

var $byhide = $("#byhide");

var $remove = $("#remove");

$cancel.click(function(e){

//Remove attributes, both methods are available

//$browsers.removeAttr("checked");

$browsers.attr("checked",false);

});

$byhide.click(function(e){

//Switch to a hidden domain, both methods are available

//$("#hidebrowser").attr("checked",true);

$("#hidebrowser").attr("checked","checked");

});

$remove.click(function(e){

//Go directly to the DOM element and remove the attributes

// If you don't use jQuery, you can transplant 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++){

// Must first set the value to false and then remove the attribute

checkedbrowser[i].checked = false;

// You can do this without removing the attribute

//checkedbrowser[i].removeAttribute("checked");

}

});

</script>

</head>

<body>

<p>Which browser do you prefer? </p>

<form>

<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 />

</form>

</body>

</html>