今天想用jquery写个全选与取消全选的案例,出了点小问题,先把代码贴出来吧:
<body>
<span style="white-space:pre"> </span><form>
<input type="checkbox" id="alldel">全选
<div>
<input type="checkbox" class="check" name="check"/>篮球
<input type="checkbox" class="check" name="check"/>足球
</div>
</form>
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#alldel").click(function() {
$("input[name='check']").attr('checked', this.checked);
})
})
</script>
通过在浏览器中测试发现这段代码只能全选与取消全选一次,找了半天浏览器也没有报错,而且在浏览器dom结构中其实正常显示了checked为true的状态,但就是没在前面打上钩,上网搜了半天没找到靠谱的答案,后来我脑筋一转,哈哈,我猜到应该是jquery版本更迭导致的原因,然后我用jquery1.8版本去测试,就能够正常全选与取消全选了!这里我推荐大家用下360家的前端公共库http://libs.useso.com/js.php?path=jquery ,包含了jquery各版本的公共库,业界良心!赞一个!
后来我上网搜了下jquery1.8和1.9的一些版本更迭问题,找到了(跑偏博客的一篇文章,这里分享一下)http://www.ppblog.cn/jquery1-9live.html,这段关于attr和prop的文章很关键,贴出来:
最后我将代码改成如下形式,就可以正常使用了: