HTML中input标签有两个类型,radio和checkbox,一个单选按钮一个复选按钮。jquery可以通过$(":radio")和$(":checkbox")选择到它们,如果要选择的是被选中的按钮,jquery可以通过$(:checked)的选中它。
Jquery判断checked的三种方法(转载内容):
.attr(‘checked’): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop(‘checked’): //16+:true/false
.is(‘:checked’): //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $(“#cb1″).attr(“checked”,”checked”);
// $(“#cb1″).attr(“checked”,true);
jquery1.6+:prop的4种赋值:
// $(“#cb1″).prop(“checked”,true);//很简单就不说了哦
// $(“#cb1″).prop({checked:true}); //map键值对
// $(“#cb1″).prop(“checked”,function(){
return true;//函数返回true或false
});
//记得还有这种哦:$(“#cb1″).prop(“checked”,”checked”);
问题: 多选反选
如何通过上面提到的选择器来完成多选与反选的功能。首先单选和复选按钮可以通过click()事件触发,也可以change()事件触发。
改变按钮选中与被选中的状态方法有下面几种:
Jquer方法
attr()方法和prop()方法(转载内容)
在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题。
百度了很久找到原因是HTML的属性分为attribute和property,暂且将后者称为特性。
checked属性即分为attribute->checked,和property->true,false。
对于一个checkbox,若未定义checked="checked",alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。
使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。
所以在修改checked属性时要使用prop()。prop()在jQuery1.6版本后新增。
下面是属性修改方法推荐使用表
Javascript方法
checkboxObject.checked=true|false
下面为实现单选与反选功能的简单代码
1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src='/images/loading.gif' data-original="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 9 <body>10 <div class="checkBox">11 <input type="checkbox" name="test" />选择一12 <input type="checkbox" name="test" />选择二13 <input type="checkbox" name="test" />选择三14 </div>15 <button class="all">全选</button>16 <button class="other">其它</button>17 <script type="text/javascript">18 $(".all").click(function() {19 $(".checkBox input").prop("checked", true);20 });21 $(".other").click(function() {22 $(".checkBox input").each(function() {23 this.checked = !this.checked;24 });25 });26 </script>27 </body>28 29 </html>
原标题:工作案件1 一切都是有check引起的
关键词: