您的位置：首页 > Web前端 > JQuery

jQuery1.9.1针对checkbox的调整

2014-04-01 21:49 260 查看

在jquery 1.8.x中的版本，我们对于checkbox的选中与不选中操作如下：

判断是否选中

$('#checkbox').prop('checked')

设置选中与不选中状态：

$('#checkbox').attr('checked',true)

$('#checkbox').attr('checked',false)

但此方法在jquery1.9.1中，有些处理不一样

IE10，Chrome,FF中，对于选中状态，第一次$('#checkbox').attr('checked',true)可以实现

但是当通过代码清除选中，下次再通过代码 $('#checkbox').attr('checked',true) 去选中时

虽然代码中有checked='checked',但是画面表现都没有打勾。

IE8，IE6下无此问题。

后来调查了相关的资料，发现现在attr('checked',true)都换成prop('checked',true)

<!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">
<head>
<title>全选，不全选，反选</title>
<script src="jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#selectAll").click(function () {//全选
// $("#playList :checkbox").attr("checked", true); //jquery 1.8版本及以前版本用法
$("#playList :checkbox").prop("checked", true);	 //jquery 1.9版本及以前版本用法
});

$("#unSelect").click(function () {//全不选
// $("#playList :checkbox").attr("checked", false);
$("#playList :checkbox").prop("checked", false);
});

$("#reverse").click(function () {//反选
$("#playList :checkbox").each(function () {
//$(this).attr("checked", !$(this).attr("checked"));
$(this).prop("checked", !$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="playList">
<input type="checkbox" value="歌曲1" />歌曲1<br />
<input type="checkbox" value="歌曲2" />歌曲2<br />
<input type="checkbox" value="歌曲3" />歌曲3<br />
<input type="checkbox" value="歌曲4" />歌曲4<br />
<input type="checkbox" value="歌曲5" />歌曲5<br />
<input type="checkbox" value="歌曲6" />歌曲6
</div>
<input type="button" value="全选" id="selectAll" />
<input type="button" value="全不选" id="unSelect" />
<input type="button" value="反选" id="reverse" />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航