jQuery判断checked的三种方法

http://www.cnblogs.com/EnSnail/p/5848529.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){//页面所有元素加载完毕

    var $btn=$("#btn");
    $btn.click(function(){                   //给元素添加onclick事件

        var $items = $("[name=check]");  //获取name为check的一组元素(checkbox)

        alert( "check个数为："+$items.length + " ; typeof $items : "+ typeof($items));
        var counter=0;
        for(i=0; i < $items.length; i++){  //循环这组数据
            if($($items[i]).is(':checked')){      //判断是否选中
                counter+=1;
            }
        }
        alert( "选中的个数为："+counter  );

/*
        var counter=0;
        for(i=0; i < $items.length; i++){  //循环这组数据
            if($items[i].checked){      //判断是否选中
                counter+=1;
            }
        }
        alert( "选中的个数为："+counter  );
*/


/*
        var arrays = new Array();              //创建一个数组对象
        //var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)
        for(i=0; i < items.length; i++){  //循环这组数据
            if(items[i].checked){      //判断是否选中
                arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.
            }
        }
        alert( "选中的个数为："+arrays.length  );
        */
    });

});
</script>
</head>
<body>
<form method="post" action="#">
    <input type="checkbox" value="1" name="check" checked="checked"/>
    <input type="checkbox" value="2" name="check" />
    <input type="checkbox" value="3" name="check" checked="checked"/>
    <input type="button" value="你选中的个数" id="btn"/>
</form>
</body>
</html>

今天在查看他人源码时看到在判断复选框是否选中时，与自己的写法不同：

　　 .is(":checked") vs .prop("checked") == true

　　因此，特地百度了一下，结果如下：

　　.attr(‘checked’): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false 　　.prop(‘checked’): //1.6+:true/false 　　.is(‘:checked’): //所有版本:true/false//别忘记冒号哦

　　jquery赋值checked的几种写法:

　　所有的jquery版本都可以这样赋值:

　　// $(“#cb1″).attr(“checked”,”checked”); 　　// $(“#cb1″).attr(“checked”,true);

　　jquery1.6+:prop的4种赋值:

　　// $(“#cb1″).prop(“checked”,true);//很简单就不说了哦　　// $(“#cb1″).prop({checked:true}); //map键值对　　// $(“#cb1″).prop(“checked”,function(){ 　　　　return true;//函数返回true或false 　　});

　　//$(“#cb1″).prop(“checked”,”checked”);

综上所述：在判断复选框、单选框等有checked属性的元素是否被选中时，兼容最好的是：

　　.is(‘:checked’): //所有版本:true/false//别忘记冒号哦

参考网址：http://www.wufangbo.com/jquery-pan-duan-checked/

分类: Web 前端

好文要顶关注我收藏该文

ESnail 关注 - 34 粉丝 - 8

+加关注

« 上一篇：jQuery中事件绑定到bind、live、delegate、on方法的探究 » 下一篇：fullPage.js学习笔记

posted @ 2017-10-18 10:06 sky20080101 阅读(212) 评论(0) 收藏举报

刷新页面返回顶部

sky20080101

jQuery判断checked的三种方法

公告