通過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>