你的位置:首页 > Java教程

[Java教程]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);
clipboard



 

对于CheckBox和Select列表框



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

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

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

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


案例(全选、反选、全部选)


clipboard[1]

代码:

<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>