js对RadioButton和CheckButton的操作，在网站开发中会经常遇到，而JQuery操作RadioButton和CheckButton非常便捷。小编觉得网站开发人员有必要熟练掌握。所以小编决定写一篇文章总结一下。小编能力有限，但是有膀子力气。老少爷们能不能点个赞呢？

RadioButton的基础操作

1.获取RadioButton
$("input[name=gender]")
或者是
$(":radio[name=gender]")
2.根据val设置选中
1）设置选中值得value
取得RadioButton的选中值，被选中的radio只有一个值，所以直接用val();
$("input[name=gender]").val(["女"]);
或者是
$(":radio[name=gender]").val(["女"]);
PS:注意val中的参数的【】不能省略，val()的参数必须是一个数组，尽管有时只有一个值。
2）设置选中
设置RadioButton的选中值： .attr('checked',true);
 

对于CheckBox和Select列表框

对RadioButton的选择技巧对于CheckBox和Select列表框也适用

除了可以使用val批量设置RadioButton、CheckBox等的选中以外，还可以设定checked属性来单独设置控件的选中状态

$(‘#selOne’).val([‘1’,’2’,’3’]);//同时设置多个下拉菜单选中

$("#btn1").attr("checked",true)

案例（全选、反选、全部选）

代码：

<script type="text/javascript">

    $(function(){

        //全选

        $('#btnAll').click(function(){

            $('div :checkbox').attr('checked',true);

        });

        //全不选

        $('#btnNoAll').click(function(){

            $('div :checkbox').attr('checked',false);

        });

        //反选

        $('#btnFanXuan').click(function(){

           $('div :checkbox').each(function(){

               $(this).attr('checked',!$(this).attr('checked'));

           });

        });

    });

    </script>

</head>

<body>

<input type="button"name="name"value="全选"id="btnAll"/>

<input type="button"name="name"value="全不选"id="btnNoAll"/>

<input type="button"name="name"value="反选"id="btnFanXuan"/>

<div>

    <input type="checkbox"name="name"value="1"/>吃饭

    <input type="checkbox"name="name"value="2"/>睡觉

    <input type="checkbox"name="name"value="3"/>打豆豆

</div>

</body>

JQuery对RadioButton和CheckButton的操作的更多相关文章

  1. jquery select取值，赋值操作

    select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...

  2. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  3. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  4. jQuery（6）——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  5. Javascript Jquery 中的数组定义与操作_子木玲_新浪博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. jQuery（三）：样式操作

    一.DOM操作分类 DOM Core:任何一种支持DOM的编程语言都可以使用它,例如:getElementById(). HTML-DOM:用于处理HTML文档,例如:document.forms. ...

  7. 第一百七十一节，jQuery，高级事件，模拟操作,命名空间,事件委托,on、off 和 one

    jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...

  8. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  9. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

随机推荐

  1. PAT 甲级 1023 Have Fun with Numbers

    https://pintia.cn/problem-sets/994805342720868352/problems/994805478658260992 Notice that the number ...

  2. bzoj1050[HAOI2006]旅行comf（枚举+贪心+并查集）

    Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求一条路径,使得路径上最大 ...

  3. 【codevs1163】访问艺术馆 树形dp

    题目描述 皮尔是一个出了名的盗画者,他经过数月的精心准备,打算到艺术馆盗画.艺术馆的结构,每条走廊要么分叉为二条走廊,要么通向一个展览室.皮尔知道每个展室里藏画的数量,并且他精确地测量了通过每条走廊的 ...

  4. Java虚拟机内存模型和volatile型变量

    Java虚拟机内存模型 了解Java虚拟机的内存模型,有助于我们明白为什么会发生线程安全问题. 上面这幅图是<深入理解Java虚拟机-JVM高级特性与最佳实践>的书中截图. 线程共享的变量 ...

  5. 51nod1222 最小公倍数计数 莫比乌斯反演 数学

    求$\sum_{i = 1}^{n} \sum_{j = 1}^{i} [lcm(i, j) \le n]$因为这样不好求,我们改成求$\sum_{i = 1}^{n} \sum_{j = 1}^{n ...

  6. Strategy Pattern ava设计模式之策略模式

    简介 在策略模式(Strategy Pattern)中,一个类的行为或其算法可以在运行时更改.这种类型的设计模式属于行为型模式.简单理解就是一组算法,可以互换,再简单点策略就是封装算法. 意图 定义一 ...

  7. Spring Boot系列教程七：Spring boot集成MyBatis

    一.创建项目         项目名称为 “springboot_mybatis_demo”,创建过程中勾选 “Web”,“MyBatis”,“MySQL”,第一次创建Maven需要下载依赖包(耐心等 ...

  8. SC命令（windows服务开启/禁用）

    原文链接地址:https://blog.csdn.net/cd520yy/article/details/30976131 sc.exe命令功能列表: 1.更改服务的启动状态(这是比较有用的一个功能) ...

  9. 解决：warning LNK4098: 默认库“MSVCRT”与其他库的使用冲突；找到 MSIL .netmodule 或使用 /GL 编译的模块；正在。。；LINK : warning LNK4075: 忽略“/INCREMENTAL”(由于“/LTCG”规范)

    原文链接地址:https://www.cnblogs.com/qrlozte/p/4844411.html 参考资料: http://blog.csdn.net/laogaoav/article/de ...

  10. 洛谷 P4390 [BOI2007]Mokia 摩基亚 解题报告

    P4390 [BOI2007]Mokia 摩基亚 题目描述 摩尔瓦多的移动电话公司摩基亚(\(Mokia\))设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如"用户 ...