jquery操作复选框全选反选选中 1.9与1.8区别

来源：互联网发布：cell 赋值矩阵编辑：程序博客网时间：2024/05/04 03:58

前段时间在用jQuery1.9版本中操作复选框总是出现选不中的情况，经过查询资料总结如下：

在jquery 1.8.及以下的版本，我们对于checkbox的选中与不选中操作如下：（一般用属性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"><head>    <title></title>    <!--<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>-->    <script src="js/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            //全选            $("#CheckedAll").click(function () {                $('[name=items]:checkbox').attr('checked', true);            });            //全不选            $("#CheckedNo").click(function () {                $('[name=items]:checkbox').attr('checked', false);            });            //反选            $("#CheckdRev").click(function () {                $('[name=items]:checkbox').each(function () {                    //此处用Jquery写法                    //$(this).attr("checked", !$(this).attr("checked"));                    //直接使用JS原生代码，简单实用                    this.checked = !this.checked;                });            });            $("#CheckedAllNO").click(function () {                $("[name=items]:checkbox").attr("checked", this.checked);            });            //提交            $("#send").click(function () {                var str = "你选中的是：\r\n";                $('[name=items]:checkbox:checked').each(function () {                    str += $(this).val() + "\r\n";                })                alert(str);            });        });    </script></head><body>    <form method="post" action="">    你爱好的运动是？    <br />    <input type="checkbox" name="items" value="足球" />足球    <input type="checkbox" name="items" value="篮球" />篮球    <input type="checkbox" name="items" value="羽毛球" />羽毛球    <input type="checkbox" name="items" value="乒乓球" />乒乓球<br />    <br />    <input type="checkbox" id="CheckedAllNO" />全选/全不选<br />    <input type="button" id="CheckedAll" value="全 选" />    <input type="button" id="CheckedNo" value="全不选" />    <input type="button" id="CheckdRev" value="反 选" />    <input type="button" id="send" value="提 交" />    </form></body></html>

在jQuery1.9以上用attr（）在第一次可以选中以及全不选，第二次操作就会不出现效果应该将attr()改成prop()

<head>    <title></title>    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>    <!--<script src="js/jquery-1.3.1.js" type="text/javascript"></script>-->    <script type="text/javascript">        $(function () {            //全选            $("#CheckedAll").click(function () {                $('[name=items]:checkbox').prop('checked', true);            });            //全不选            $("#CheckedNo").click(function () {                $('[type=checkbox]:checkbox').prop('checked', false);            });            //反选            $("#CheckdRev").click(function () {                $('[name=items]:checkbox').each(function () {                    //此处用JQ写法。                    //$(this).attr("checked", !$(this).attr("checked"));                    //直接使用JS原生代码，简单实用                    this.checked = !this.checked;                });            });            $("#CheckedAllNO").click(function () {                $("[name=items]:checkbox").prop("checked", this.checked);            });            //提交            $("#send").click(function () {                var str = "你选中的是：\r\n";                $('[name=items]:checkbox:checked').each(function () {                    str += $(this).val() + "\r\n";                })                alert(str);            });        });    </script></head>

那么，什么时候使用attr，什么时候使用prop？？

1.添加属性名称该属性就会生效应该使用prop.

2.是有true,false两个属性使用prop.

3.其他则使用attr

项目中jquery升级的时候大家要注意这点！

以下是官方建议attr(),prop()的使用：

Attribute/Property.attr().prop()accesskey√ align√ async√√autofocus√√checked√√class√ contenteditable√ draggable√ href√ id√ label√ location ( i.e. window.location )√√multiple√√readOnly√√rel√ selected√√src√ tabindex√ title√ type√ width ( if needed over .width() )

0 0