2014年4月4日 星期五

jQuery 對 checkbox 的操作( $('#').attr('checked') 無法正確取得結果 )

jQuery大概是目前最受歡迎的 Javascript Framework,在網頁中操作 checkbox 也是常有的事,那在 jQuery中要如何操作 checkbox 呢,上網可能搜到上百個解答,但許多都是相互抄來的,您可能發現很多解答告訴我們用   $("#check").attr("checked")  來判斷是否被勾選,但結果與「想像」的不一樣,因為 $("#check").attr("checked")  並不會傳回 true 或 false,而是傳回 checked 這個屬性的值,詳解如下:
要如何判斷checkbox 是否已被勾選?
$("#check").attr("checked")  很難正確判斷是否真的被勾選
如果 <input  type="checkbox" id="check" ...>   有勾選,會傳回 "checked"
如果 <input type="checkbox" id="check" ...>  沒有勾選,會傳回 "undefined"
不是傳回 true false !!

如果撰寫時已加入 checked 屬性 <input type="checkbox" id="check" checked ...> ,則不管有無勾選,用 $("#check").attr("checked")   都會傳回 "checked",根本無判斷是否已勾選!!
要能正確以 true/false 判斷是否勾選應該使用
$("#check").prop("checked")     // prop  才會回傳 true 或 false

要如何利用jQuery勾選checkbox? 下面兩條敘述都可以正確達到目的
$("#check").attr("checked",true);
$("#check").prop("checked",true);

甚至  $("#check").attr("checked","false"); 也會讓 checkbox 被勾選,但
$("#check").attr("checked",false);  則不會被勾選!!  (注意 false 有無用 "  " 括起來!)

你以為 <input type="checkbox" checked="false"> 是否就是取消勾選 ? 底下是我實驗的程式碼,您也可以試試看。
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#imgbtnSubmit").click(function() {
                alert("chk1.Attr: " + $("#chk1").attr("checked"));
                alert("chk1.Prop: " + $("#chk1").prop("checked"));
                alert("chk2.Attr: " + $("#chk2").attr("checked"));
                alert("chk2.Prop: " + $("#chk2").prop("checked"));
            });

           $("#imgbtnChk").click(function() {
                $("#chk1").attr("checked",true);
                $("#chk2").prop("checked",true);
            });
        });
    </script>
 </head>
<body>
    <form id="form1" style="width:100%;">
    <input type="checkbox" id="chk1" value="0" />
    <input type="checkbox" id="chk2" value="0" checked=false />
    <input type="button" id="imgbtnSubmit" value="確定" >
     <input type="button" id="imgbtnChk" value="勾選" >
    </form>
</body>
</html>

沒有留言:

張貼留言