jquery操作checkbox火狐下第二次无法勾选的解决方法
最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选、反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果。
HTML代码如下:
jQuery代码:
<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript" src="jquery-1.9.1.js">
<script type="text/javascript">
$().ready(function(){
//全选/全不选复选框
$("#selectal1").click( function(){
if($(this).attr("checked")==true){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",true);
});
}else{
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",false);
});
}
});
//全选按钮
$("#allbtn").click(function(){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",true);
});
});
//全不选按钮
$("#notallbtn").click(function(){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",false);
});
});
//反选按钮
$("#reversebtn").click(function(){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",!$(this).attr("checked"));
});
});
})
复选框
绑定了click事件,点一次选中,再点击取消选中,依次类推。这个
功能在IE8中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常
显示选中和取消,但当再去选中的时候,复选框的
属性check
Box值变为”checked”,没问题,但是复选框却不在
显示选中状态,明明
属性值改了,但是却
不显示勾选,我以为是浏览器缓存的问题,但是
删除缓存还是不行……..后来在网上看到了
方法,说是jQuery版本的问题,jQuery1.6以上用attr会存在兼容性问题,得换成prop。
查了下API prop属性是这样的:
概述
获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误。
jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,于是乎把js代码里面的attr换成prop就行了。
代码:
rush:js;">
//1.6+的jQuery要用prop代替attr否则达不到
效果!!!!
//全选/全不选复选框
$("#selectal1").click( function(){
if($(this).prop("checked")==true){
$("input:check
Box[id!='selectal1']").each(function() {
$(this).prop("checked",true);
});
}else{
$("input:check
Box[id!='selectal1']").each(function() {
$(this).prop("checked",false);
});
}
});
//全选按钮
$("#allbtn").click(function(){
$("input:check
Box[id!='selectal1']").each(function() {
$(this).prop("checked",true);
});
});
//全不选按钮
$("#notallbtn").click(function(){
$("input:check
Box[id!='selectal1']").each(function() {
$(this).prop("checked",false);
});
});
//反选按钮
$("#reversebtn").click(function(){
$("input:check
Box[id!='selectal1']").each(function() {
$(this).prop("checked",!$(this).prop("checked"));
});
});
希望对大家有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。