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. Lucene 高级搜索

    自定义评分 public class MyScoreQuery { public void searchByScoreQuery(){ try { IndexSearcher searcher=new ...

  2. jQuery之_元素滚动

    对应的知识点铺垫,但是有一个很重要的问题就是兼容IE和chorme的 1. scrollTop(): 读取/设置滚动条的Y坐标2. $(document.body).scrollTop()+$(doc ...

  3. 关于解决java读取excel文件遇空行抛空指针的问题 !

    关于解决java读取excel文件遇空行抛空指针的问题 ! package exceRead; import java.io.File; import java.io.FileInputStream; ...

  4. 爬虫学习之-urlparse之urljoin()

    首先导入模块,用help查看相关文档 >>> from urlparse import urljoin >>> help(urljoin) Help on func ...

  5. IDEA换行CRLF, LF, CR的解释和默认设置

    在window下开发有一个大坑,就是换行默认是CRLF,也就是回车换行,但是Linux下只有换行LF,这样代码提交后,会出现编译问题,所以最好的办法是在IDEA下设置默认为LF. 首先我们先介绍CRL ...

  6. 使用JsonConfig中的setExcludes方法过滤不需要转换的属性

    Hibernate的many-to-one双向关联中,查询many方时会将one方数据顺带着查询,同时one中会有List<Many>,然后又会去查Many中的数据... 周而复始,结果j ...

  7. [转帖] 部分收费的Oracle JDK VS 完全免费的OpenJDK

    来源: http://www.flammulina.com/2018/10/28/%E9%83%A8%E5%88%86%E6%94%B6%E8%B4%B9%E7%9A%84oracle-jdk-vs- ...

  8. 【Linux学习笔记】Linux C中内联汇编的语法格式及使用方法(Inline Assembly in Linux C)

    http://blog.csdn.net/slvher/article/details/8864996 https://gcc.gnu.org/onlinedocs/gcc/Extended-Asm. ...

  9. BZOJ3530:[SDOI2014]数数——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3530 我们称一个正整数N是幸运数,当且仅当它的十进制表示中不包含数字串集合S中任意一个元素作为其子 ...

  10. Mac连接HDMI后没有声音

    Mac连接HDMI后,会自动切换到HDMI设备进行发声,若HDMI设备没有声音,则不会发声.必须切换回内置扬声器才能有声音,或者拔出HDMI设备. 系统偏好设置 -  声音 - 输出 - 选择内置扬声 ...