JQuery对RadioButton和CheckButton的操作
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的操作的更多相关文章
- jquery select取值,赋值操作
select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
- jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
- jQuery(6)——jQuery对表单、表格的操作及更多应用
jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...
- Javascript Jquery 中的数组定义与操作_子木玲_新浪博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jQuery(三):样式操作
一.DOM操作分类 DOM Core:任何一种支持DOM的编程语言都可以使用它,例如:getElementById(). HTML-DOM:用于处理HTML文档,例如:document.forms. ...
- 第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one
jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- jQuery 对表单、表格的操作及更多应用-简略笔记
[jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...
随机推荐
- IDEA中Git的更新/提交/还原方法
记录一下在IDEA上怎样将写的代码提交到GitHub远程库: 下面这个图是基本的提交代码的顺序: 1. 将代码Add到stage暂存区本地修改了代码后,需先将代码add到暂存区,最后才能真正提价到gi ...
- CentOS7 修改yum源为阿里云
1,登陆root帐号 2,cd /etc/yum.repo.d 3,mv CentOS-Base.repo CentOS-Base.repo.bak4,wget http://mirrors.aliy ...
- Java实现简单的RPC框架(美团面试)
一.RPC简介 RPC,全称为Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用) ...
- Centos 7 环境下,如何使用 Apache 实现 SSL 虚拟主机 双向认证 的详细教程:
1. testing ! ... 1 1 原文参考链接: http://showerlee.blog.51cto.com/2047005/1266712 很久没有更新LAMP的相关文档了,刚好最近单位 ...
- Delphi通过ADO链接数据库及对数据库的增加,删除,修改,读取操作实例教程4
ADO是一种程序对象,用于表示用户数据库中的数据结构和所包含的数据.ADO(ActiveXDataObjects,ActiveX数据对象)是Microsoft提出的应用程序接口(API)用以实现访问关 ...
- 第74天:jQuery实现图片导航效果
图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- presence_of_element_located与visibility_of_element_located区别
selenium 问题:加了显性等待后,操作元素依然出错 背景: 用WebDriverWait时,一开始用的是presence_of_element_located,我对它的想法就是他就是用来等待 ...
- 【服务器_Tomcat】Tomcat的Server Options选项
一.配置 默认前两个是没有勾选的,应该勾选上: 在Cotext节点中有一个reloadable='true'属性,将它改为false,可以在修改java文件后不用重启服务器即可生效,但是不包括新建ja ...
- BZOJ3591 最长上升子序列(状压dp)
之前听说过一种dp套dp的trick,大致是用另一个dp过程中用到的一些东西作为该dp的状态.这个题比较类似. 考虑求LIS时用到的单调队列.设f[S]为所选取集合为S的方案数,其中在单调队列内的标2 ...
- Contest 3
A:非常裸的dp. #include<iostream> #include<cstdio> #include<cstdlib> #include<cstrin ...

