jquery checkbox勾选/取消勾选的诡异问题

最新推荐文章于 2024-05-09 17:51:11 发布

簫蓁

最新推荐文章于 2024-05-09 17:51:11 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签： jquery checkbox

本文链接：https://blog.csdn.net/u013603433/article/details/51251218

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近开发的时候突然与到有这样的一个问题(记录下解决的方法)：

<html xmlns="http://www.w3.org/1999/xhtml">
    <hear>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JQuery測試</title>

        <script type="text/javascript" src="../../JQuery/jquery.min.js"></script>
    </hear>
    <body>
        <form>
         你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br />
         <input type="checkbox" id="football" name="items" value="足球" />足球
         <input type="checkbox" name="items" value="篮球" />篮球
         <input type="checkbox" name="items" value="羽毛球" />羽毛球
         <input type="checkbox" name="items" value="乒乓球" />乒乓球
         <br />
         <input type="button" id="send" value="提 交" />
        </form>


        <script type="text/javascript">
             $("#CheckedAll").click(function () {
                 if ($(this).is(":checked")) {
                     $("[name=items]:checkbox").attr("checked", true);
                } else {
                     $("[name=items]:checkbox").attr("checked", false);
                }
             });

            //点击checkbox后打印其checked属性值 为undefined

             $("#football").click(function(){
                var football = $(this).attr("checked"); 
                console.log(football) ;
             }) ;

        </script>
    </body>
</html>

第一次执行，没问题，但第二次执行就有问题了，选择不了;

解决办法：把attr()换成prop()

$("#CheckedAll").click(function () {
                if ($(this).is(":checked")) {
                    $("[name=items]:checkbox").prop("checked", true);
                } else {
                    $("[name=items]:checkbox").prop("checked", false);
                }
            });

原因：
jQuery版本问题。我操作属性用的是 $(“**”).attr(“attrName”);而jQuery的版本用的是1.9，这就是存在一个兼容性和稳定性问题。 jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，即

$("input[type='checkbox']").prop("checked"); 
$("input[type='checkbox']").prop("disabled", false); 
$("input[type='checkbox']").prop("checked", true);