使用Jquery的方法控制checkBox的全选和全不选

最新推荐文章于 2024-09-22 11:17:00 发布

baiga1992

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xxmBlogs/p/3459642.html

版权

$(document).ready(function () {
    
    $("#AllCheckBox").change(function () {
        var checkedOfAll = $(this).prop("checked");
        $(":checkbox").prop("checked", checkedOfAll);
    });
});

取得checkbox的属性值时用.prop()方法，会更加有效，它会随着checkbox打对勾和不打对勾的状态而改变返回值。在官方网站上也有它与.attr()方法的对比，官方实例：http://www.css88.com/jqapi-1.9/prop/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 20px 0 0 }
  b { color: blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$("input").change(function() {
  var $input = $(this);
  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>
 
</body>
</html>