取消選取單選框radio的三種方式範例介紹

作者：Eve Cole 更新時間：2025-02-15 11:48:02

本文提供了三種取消選取radio的方式，程式碼範例如下:

本文依賴jQuery,其中第一種，第二種方式是使用jQuery實現的，第三種方式是基於JS和DOM實現的。

複製代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>單選按鈕取消選取的三種方式</title>

</script>

$(function(){

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

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

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

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

$cancel.click(function(e){

// 移除屬性,兩種方式都可

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

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

});

$byhide.click(function(e){

// 切換到一個隱藏域,兩種方式均可

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

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

});

$remove.click(function(e){

// 直接去的DOM元素,移除屬性

// 如果不使用jQuery,則可以移植此方式

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++){

// 必須先賦值為false,再移除屬性

checkedbrowser[i].checked = false;

// 不移除屬性也可以

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

}

});

</script>

</head>

<body>

<p>您喜歡哪一款瀏覽器？ </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>