7.全選反選操作 · 程序員開發筆記

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ padding: 100px 150px; } </style> </head> <body> <input type="button" value="全選" id="quanxuan" /> <input type="button" value="反選" id="fanxuan" /> <input type="button" value="全不選" id="quanbuxuan" /> <br /><br /><br /> <ul id="articles"> <li><input type="checkbox" /> 后盾人人人做后盾1</li> <li><input type="checkbox" /> 后盾人人人做后盾2</li> <li><input type="checkbox" /> 后盾人人人做后盾3</li> <li><input type="checkbox" /> 后盾人人人做后盾4</li> <li><input type="checkbox" /> 后盾人人人做后盾5</li> <li><input type="checkbox" /> 后盾人人人做后盾6</li> <li><input type="checkbox" /> 后盾人人人做后盾7</li> <li><input type="checkbox" /> 后盾人人人做后盾8</li> </ul> <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //全選 $("#quanxuan").click(function(){ $("#articles :checkbox").attr('checked','checked'); $("#articles :checkbox").prop('checked',true); }) //全不選 $("#quanbuxuan").click(function(){ $("#articles :checkbox").removeAttr('checked'); $("#articles :checkbox").removeProp('checked'); }) //反選 $("#fanxuan").click(function(){ //獲得現在處在選中狀態的元素 var obj = $("#articles :checked"); //全選 $("#articles :checkbox").attr('checked','checked'); $("#articles :checkbox").prop('checked',true); //讓剛才記錄下來的元素取消選擇 obj.removeAttr('checked'); obj.removeProp('checked'); }) </script> </body> </html>