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 有無用 " " 括起來!)
$("#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>
<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>
沒有留言:
張貼留言