取消选中单选框radio，第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的，大家可以看看下面的示例

本文提供了三种取消选中radio的方式，代码示例如下:

本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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

取消

$('.reset-bottom').click(function(){
$('.mui-input-clear').attr('value','');
$('input[name=sex]').removeAttr("checked");
$('input[name=type]').removeAttr("checked");
$('input[name=steelyard]').removeAttr("checked");
$('input[name=brand]').removeAttr("checked");

});

jQuery重置单选框和input框的更多相关文章

  1. jquery对单选和下拉框的操作

    jquery 对表单的操作: 对单选框的操作: 一.对单选框的操作: 1.$('input

  2. 用jquery修改默认的单选框radio或者复选框checkbox选择框样式

    默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...

  3. Jquery判断单选框是否选中和获取选中的值

    第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  4. jQuery获取单选框（复选框）选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

  5. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

  7. 让单选input框，不在被选中，添加disabled即可。输入框input的一些技巧

    1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.

  8. jQuery实现input框输入值动态搜索

    我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点.我本来的想法是给一个iframe,在 里面显示所有的数据并提供一个筛选的功能 ...

  9. input框中的value值到底是什么

    value 属性为 input 元素设定值. 对于不同的输入类型,value 属性的用法也不同: type="button", "reset", "s ...

随机推荐

  1. ipfs补充命令

    ipfs cat之后 将文件保存在指定的路径下 添加都文件夹下面 ipfs files cp /ipfs/QmSkyNME8YqndkNq7ovKphpYwjk2hEQ61P1pjSckqLP6zt ...

  2. Alpha阶段展示

    程序员杀产品经理祭天(SacrificePM)团队 1.团队成员简介和个人博客地址 故事 我们队伍的建立过程稍具戏剧性,大家看我们也颇为奇怪,这么一支8人队伍是怎么诞生的呢?其实我们原本分属三组,而第 ...

  3. winform自动最大化（在不同分辨率情况下）

    load函数末尾加: System.Drawing.Rectangle rec = Screen.GetWorkingArea(this); int SH = rec.Height; int SW = ...

  4. 第一章 MATLAB环境

    1.P5输入who 告诉MATLAB显示到目前为止所有变量名称. 2.P5输入whos 会得到更多的信息,告诉我们当前内存中的变量.类型,每个变量的所分配的内存空间,以及它们是否是负数(complex ...

  5. poj1094拓扑排序

    Sorting It All Out Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 29539   Accepted: 10 ...

  6. 小C的记事本（栈记录字符串）

    链接:https://www.nowcoder.com/acm/contest/122/D来源:牛客网 题目描述 小C最近学会了java小程序的开发,他很开心,于是想做一个简单的记事本程序练练手. 他 ...

  7. 【WebService】——SOAP、WSDL和UDDI

    WebService的三要素:SOAP.WSDL和UDDI.soap用来描述传递信息的格式,wsdl描述如何访问具体的接口,uddi管理.分发查询WebService. 1.SOAP SOAP Sim ...

  8. 【python】python各种类型转换-int,str,char,float,ord,hex,oct等

    [python] int(x [,base ])         将x转换为一个整数 long(x [,base ])        将x转换为一个长整数 float(x )             ...

  9. sqoop工具从oracle导入数据2

    sqoop工具从oracle导入数据 sqoop工具是hadoop下连接关系型数据库和Hadoop的桥梁,支持关系型数据库和hive.hdfs,hbase之间数据的相互导入,可以使用全表导入和增量导入 ...

  10. 2018宁夏邀请赛L Continuous Intervals

    题目链接:https://nanti.jisuanke.com/t/28412 题意: 给出n个数的序列.问序列中有多少个区间满足,排序完之后任意两个相邻的数之差不大于1. 题解: 用max表示区间最 ...