前段时间在用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>
View Code

相关文章:

  • 2021-10-29
  • 2021-08-14
  • 2021-10-02
  • 2021-08-17
  • 2022-12-23
  • 2021-11-21
  • 2021-10-27
  • 2021-11-21
猜你喜欢
  • 2022-01-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-22
  • 2022-12-23
相关资源
相似解决方案