jQuery判斷復選框checkbox的選中狀態


通過jQuery設置復選框為選中狀態

復選框

<input type="checkbox"/>

錯誤代碼:

$("input").attr("checked","checked");

設置以后checkbox變成選中狀態,用Chrome調試看了一下,checkbox中確實有checked屬性,而且值為checked,根據W3C的表單規范,checked屬性是一個布爾屬性,這意味着只要該 attribute 存在,即使它沒有值,或是一個空字符串,該屬性對應的 property 默認就是 true,也就是說和attribute的值沒有關系。但是一旦通過 prop 將 property 設置為false,則使用 attr 將無法使該 checkbox 改變為選中狀態。

正確代碼:

$("input").prop("checked",true);

設置后復選框為選中狀態了。

原因:

attributes(屬性) 和 properties(特性) 之間的差異在特定情況下是很重要的。

jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值時,會返回 property 的值,這就導致了結果的不一致。

從 jQuery 1.6 開始, .prop()方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

以下推薦的是兼容瀏覽器的三種寫法,判斷 checkbox 元素的 checked 屬性是否為"真" (是否被選中),elem是 JavaScript 對象:

if ( $(elem).prop("checked") ){} 
if ( $(elem).is(":checked") ){}
if ( elem.checked ) {}

代碼示例:

 1 <html> 
 2     <head> 
 3         <title></title> 
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
 6     </head> 
 7     <body> 
 8         <div>
 9             <input type="button" value="點擊1" onclick="add1();" />
10             <input type="button" value="點擊2" onclick="add2();" />
11             <input type="button" value="點擊3" onclick="add3();" />
12             <input type="checkbox" id="myinput" /> 
13         </div> 
14     </body>
15     <script type="text/javascript"> 
16         //添加選中和未選中狀態
17         function add1(){
18             if($("#myinput").prop("checked")){
19                 $("#myinput").prop("checked",false);
20             }else{
21                 $("#myinput").prop("checked",true);
22             }
23             
24         }
25         function add2(){
26             if($("#myinput").is(":checked")){
27                 $("#myinput").prop("checked",false);
28             }else{
29                 $("#myinput").prop("checked",true);
30             }
31         }
32         function add3(){
33             if(document.getElementById("myinput").checked){
34                 $("#myinput").prop("checked",false);
35             }else{
36                 $("#myinput").prop("checked",true);
37             }
38         }
39     </script>
40 </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM