用prop()
在jQuery中可以使用attr()來訪問對象的屬性，但是在某些時候，比如訪問input的disabled屬性的時候，會有些問題。在有的瀏覽器中，只要寫了disabled屬性就可以，有的則要寫：disabled="disabled"。所以jquery提供了新的方法prop()來獲取這些屬性，使用prop()的時候，返回值是標准屬性：true/false，不會回返“disabled”或者“”。那么，那些屬性應該使用attr()訪問，哪些應該用prop()訪問呢？
第一個原則：只添加屬性名稱該屬性就會生效的應該使用prop()；
第二個原則：只存在true/false的屬性應該使用prop()。
像如果是設置disabled或者checked這些屬性，應該使用prop()方法，而不是使用attr()方法。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>復選框應用</title>
- <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
- <style>
- .checkbox{
- border: 1px solid #A9A9A9;
- margin: 10px auto;
- padding: 10px 10px;
- }
- </style>
- <script>
- $(function(){
- //全選
- $("#CheckedAll").click(function(){
- //$("[name=items]:checkbox").attr('checked',true);//只有第一次生效
- $("[name=items]:checkbox").prop('checked',true);//只有第一次生效
- });
- //全不選
- $("#CheckedNo").click(function(){
- //$("[name=items]:checkbox").attr('checked',false);//只有第一次生效
- $("[name=items]:checkbox").prop('checked',false);
- });
- //反選
- $("#CheckedRev").click(function(){
- $("[name=items]:checkbox").each(function(){
- this.checked=!this.checked;
- })
- });
- //提交
- $("#send").click(function(){
- var str="你選中的是：\r\n";
- $("[name=items]:checked").each(function(){
- str+=$(this).val()+"\r\n";
- })
- alert(str);
- });
- //全選/全不選
- $("#CheckedAN").click(function(){
- $("[name=items]:checkbox").prop("checked",this.checked);
- })
- //當復選框取消某一個選項的選中狀態是時，全選/全不選需要取消選中狀態
- $("[name=items]:checkbox").click(function(){
- var tmp=$("[name=items]:checkbox");
- $("#CheckedAN").prop("checked",tmp.length==tmp.filter(":checked").length);
- })
- })
- </script>
- </head>
- <body>
- <form action="#" method="post" id="regForm">
- <fieldset>
- <legend>復選框應用</legend>
- <div class="checkbox">
- 你愛好的運動是？
- <input type="checkbox" id="CheckedAN" value="全選/全不選"/>全選/全不選
- <br />
- <input type="checkbox" name="items" value="足球"/>足球
- <input type="checkbox" name="items" value="籃球"/>籃球
- <input type="checkbox" name="items" value="羽毛球" />羽毛球
- <input type="checkbox" name="items" value="乒乓球" />乒乓球
- <br />
- <input type="button" id="CheckedAll" value="全選"/>
- <input type="button" id="CheckedNo" value="全不選"/>
- <input type="button" id="CheckedRev" value="反選" />
- <input type="button" id="send" value="提交" />
- </div>
- </fieldset>
- </form>
- </body>
- </html>