【七】jquery之屬性attr、 removeAttr、prop
阿新 • • 發佈：2018-02-09
讀書 else mov back rem remove checked asc ava
全選全不選
界面：
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-3.3.1.js"></script> </head> <body> <input type="checkbox" id="checkall" />全選/全不選 <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="唱歌" />唱歌 <input type="checkbox" name="items" value="讀書" />讀書 <br/> <input type="button" id="checkall_1" value="全選"/> <input type="button" id="checkno" value="全不選"/> <input type="button" id="checkarev" value="反選"/> <input type="button" id="send" value="提交"/> <script type="text/javascript"> //全選全不選 $(document).ready(function(){ $("#checkall").click(function(){ if (($("#checkall").prop("checked"))){ $(":input[name=‘items‘]").attr("checked",true); }else{ $(":input[name=‘items‘]").attr("checked",false); } }); }); //全選 $(document).ready(function(){ $("#checkall_1").click(function(){ $(":input[name=‘items‘]").attr("checked",true); }); }); //全不選 $(document).ready(function(){ $("#checkno").click(function(){ //方式一 $(":input[name=‘items‘]").attr("checked",false); //方式二 // $("input[name=‘checkbox‘]").removeAttr("checked"); }); }); //反選 $(document).ready(function(){ $("#checkarev").click(function(){ $("input[name=‘items‘]").each(function(){ //attr //1.attr("checked"):返回被選中元素的屬性值 //2.attr("checked",true)：設置選中屬性 if (this.checked) { $(this).prop("checked",false); }else{ $(this).prop("checked",true); } }); }); }); </script> </body> </html>
【七】jquery之屬性attr、 removeAttr、prop