解決checkbox屬性checked為true但是未被選中的問題
阿新 • • 發佈：2018-12-22
原來是jQuery版本問題。
Attributes vs. Properties
attributes和properties之間的差異在特定情況下是很重要。jQuery
1.6之前 ，.attr()方法在取某些
attribute 的值時，會返回 property 的值，這就導致了結果的不一致。從 jQuery 1.6 開始， .prop()方法
方法返回 property 的值,而.attr() 方法返回 attributes 的值。
例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked
defaultSelected應使用.prop()方法進行取值或賦值。 在jQuery1.6之前，這些屬性使用.attr()方法取得，但是這並不是元素的attr屬性。他們沒有相應的屬性（attributes），只有特性(property)。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>checkbox 全選 反選</title> </head> <body> <div class="warp" style="margin:100px"> <div class="checktype"> <label>全選<input type="radio" name="checktype" id="checkall" /></label> <label>反選<input type="radio" name="checktype" id="checkback" /></label> </div> <div class="checkbox"> <table> <tr> <td><input type="checkbox" />1</td> </tr> <tr> <td><input type="checkbox" />2</td> </tr> <tr> <td><input type="checkbox" />3</td> </tr> <tr> <td><input type="checkbox" />4</td> </tr> <tr> <td><input type="checkbox" />5</td> </tr> <tr> <td><input type="checkbox" />6</td> </tr> <tr> <td><input type="checkbox" />7</td> </tr> </table> </div> </div> <script type="text/javascript" src="../jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#checkall").click(function(){ if(this.checked){ $(".checkbox input[type=checkbox]").prop("checked",true); }else{ $(".checkbox input[type=checkbox]").prop("checked",false); } }); $("#checkback").click(function(){ var back = $(".checkbox input[type=checkbox]"); back.each(function(){ console.log(this.checked); if( this.checked ){ $(this).prop("checked",false); }else{ $(this).prop("checked",true); } }); }); }) </script> </body> </html>