三种取消选中单选框radio的方法
更新时间：2014年09月09日 16:00:48 投稿：whsnow
取消选中单选框radio，第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的，大家可以看看下面的示例
本文提供了三种取消选中radio的方式，代码示例如下:
本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。
<!DOCTYPE HTML>
<html>
<head>
<title>单选按钮取消选中的三种方式</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){
// 移除属性,两种方式都可
//$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 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="取消选中方式1" size="20">
<input type="button" id="byhide" value="取消选中方式2" size="20">
<input type="button" id="remove" value="取消选中方式3" size="20">
</form>
</body>
</html>
相关文章
这篇文章主要介绍了jquery 自定义容器下雨效果可将下雨图标改为其他,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jquery制作 随机弹跳的小球特效,需要的朋友可以参考下2015-02-02
jquerymobile checkbox及时刷新才能获取其准确值
一般登录的时候 都有个记住用户名 记住密码 的两个checkbox 多选框用jquerymobile 做页面 ，当勾选checkbox 时总是不能获取它正确的值2012-04-04
这篇文章主要介绍了jQuery实现导航样式布局操作,可实现基于jQuery的用户自定义样式布局与属性动态操作相关技巧,需要的朋友可以参考下2018-07-07
写了好多篇的学习笔记。也该动手练练，咱不能总是纸上谈兵。最近做了其他的一些练习，也是有涉及图片淡入淡出的，使用的是animate。2010-09-09
本文主要介绍jQuery获取radio选中项的值的方法，希望能帮到大家，有需要的朋友可以参考一下。2016-06-06
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
实现弹出遮罩层的方法有很多种，接下来本文给大家介绍通过jquery操作dom实现弹出页面遮罩层以及web端和移动阻止遮罩层的滑动，对页面弹出遮罩层的相关知识感兴趣的朋友一起看看吧2016-08-08
这篇文章主要为大家详细介绍了jQuery实现select带模糊查询的条件查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
获取iframe的document对象进行dom的操作，实现方法很多，下面是jquery的实现过程，喜欢玩iframe的朋友可以参考下2014-10-10
这篇文章主要为大家详细介绍了jquery ajax异步提交表单数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论