首页 > Web开发 > 详细

JQuery对RadioButton和CheckButton的操作

时间:2015-03-22 18:04:40      阅读:404      评论:0      收藏:0      [点我收藏+]

    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的操作

原文:http://www.cnblogs.com/mcad/p/4357661.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!