Three ways to uncheck the radio button_jquery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Three ways to uncheck the radio button_jquery

May 16, 2016 pm 04:36 PM

Radio Single box

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.

&lt;!DOCTYPE HTML&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;title&gt;单选按钮取消选中的三种方式&lt;/title&gt; 
&lt;script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"&gt; 
&lt;/script&gt; 
&lt;script type="text/javascript"&gt; 
$(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 &lt; len; i++){ 
// 必须先赋值为false,再移除属性 
checkedbrowser[i].checked = false; 
// 不移除属性也可以 
//checkedbrowser[i].removeAttribute("checked"); 
} 

}); 
}); 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p&gt;您喜欢哪款浏览器？&lt;/p&gt; 

&lt;form&gt; 
&lt;input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""&gt; 
&lt;input type="radio" name="browser" value="Internet Explorer"&gt;Internet Explorer&lt;br /&gt; 
&lt;input type="radio" name="browser" value="Firefox"&gt;Firefox&lt;br /&gt; 
&lt;input type="radio" name="browser" value="Netscape"&gt;Netscape&lt;br /&gt; 
&lt;input type="radio" name="browser" value="Opera"&gt;Opera&lt;br /&gt; 
&lt;br /&gt; 
&lt;input type="button" id="cancel" value="取消选中方式1" size="20"&gt; 
&lt;input type="button" id="byhide" value="取消选中方式2" size="20"&gt; 
&lt;input type="button" id="remove" value="取消选中方式3" size="20"&gt; 
&lt;/form&gt; 

&lt;/body&gt; 
&lt;/html&gt;

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn