jQuery checkbox选中问题之prop与attr注意点分析
本文实例分析了jQuery checkbox选中问题之prop与attr注意点。分享给大家供大家参考，具体如下：
一个网上很多的例子如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
// 全选
$("#btnCheckAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", true);
});
// 全不选
$("#btnCheckNone").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", false);
});
// 反选
$("#btnCheckReverse").bind("click", function () {
$("[name = chkItem]:checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
// 全不选
$("#btnSubmit").bind("click", function () {
var result = new Array();
$("[name = chkItem]:checkbox").each(function () {
if ($(this).is(":checked")) {
result.push($(this).attr("value"));
}
});
alert(result.join(","));
});
});
</script>
</head>
<body>
<div>
<input name="chkItem" type="checkbox" value="今日话题" />今日话题
<input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
<input name="chkItem" type="checkbox" value="财经" />财经
<input name="chkItem" type="checkbox" value="汽车" />汽车
<input name="chkItem" type="checkbox" value="科技" />科技
<input name="chkItem" type="checkbox" value="房产" />房产
<input name="chkItem" type="checkbox" value="旅游" />旅游
</div>
<div>
<input id="btnCheckAll" type="button" value="全选" />
<input id="btnCheckNone" type="button" value="全不选" />
<input id="btnCheckReverse" type="button" value="反选" />
<input id="btnSubmit" type="button" value="提交" />
</div>
</body>
</html>
运行后，在火狐下面发现一个问题百思不得其解
问题描述：第一次点全选可以，然后点击全不选，接着再点击全选、全不选、反选就没了反应，后来用其他浏览器发下可以，所以感觉是兼容性的问题，后来查阅资料发现果然是的，参考地址http://jquery.com/
解决方法：将attr换为prop即可，经过验证各个浏览器都是好的，官网说明是在1.6之后建议用prop，在此记录以备后用
下为效果图
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
-
本文向大家介绍jquery中attr、prop、data区别与用法分析，包括了jquery中attr、prop、data区别与用法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery中attr、prop、data区别与用法。分享给大家供大家参考，具体如下： 在高版本的jquery中获取标签的属性，可以使用attr()、prop()、data()，那么这些方法有什么区别呢？ 对于
-
本文向大家介绍jquery中attr和prop的区别分析，包括了jquery中attr和prop的区别分析的使用技巧和注意事项，需要的朋友参考一下 在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。 关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单： • 对于HTML元素本身就带有的固有属性，在处理时，
-
本文向大家介绍Jquery中attr与prop的区别详解，包括了Jquery中attr与prop的区别详解的使用技巧和注意事项，需要的朋友参考一下 实践过程 在前一段时间，同事做了一个页面，效果是这样的 页面 当点击左上方那个checkBox时，要将下面的checkBox全部选中，我们的代码是这样的 然并卵，一点效果都没有，后来换成这样，好了 于是上官方的文档查了下attr和prop的区别，发现根
-
本文向大家介绍jquery判断复选框选中状态以及区分attr和prop，包括了jquery判断复选框选中状态以及区分attr和prop的使用技巧和注意事项，需要的朋友参考一下 最近项目中需要用jquery判断input里checkbox是否被选中，发现用attr（）获取不到复选框改变后的状态，最后查资料发现jQuery 1.6以后新增加了prop（）方法，借用官方的一段描述就是： The diff
-
本文向大家介绍jQuery中 prop() attr()使用详解，包括了jQuery中 prop() attr()使用详解的使用技巧和注意事项，需要的朋友参考一下 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之
-
本文向大家介绍jquery选择器需要注意的问题，包括了jquery选择器需要注意的问题的使用技巧和注意事项，需要的朋友参考一下 我们先来看段代码，很简单,如下 $("#div1 span")获得三个对象的数组 1.如果执行 $("#div1 span").html("aaa"),则数组内的所有对象都会改变.如下图 2.如果执行$("#div1 span").html(),只取值的话,则只会取数组第