你的位置:首页 > Java教程

[Java教程]工作案件1 一切都是有check引起的


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