jQuery 全選與全不選，反選
阿新 • • 發佈：2020-08-23
1.不帶選項框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選全不選1(空白)</title> <script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /* 功能需求： */ $(function(){ $("#checkedAllBtn").click(function(){ //①全選按鈕：點選後所有愛好都選中 設定的屬性值相同 $("input[name='items']").attr("checked" , true);//隱式迭代 }); $("#checkedNoBtn").click(function(){ //②全不選按鈕：點選後所有愛好都不選中 $("input[name='items']").attr("checked" , false);//隱式迭代 }); $("#checkedRevBtn").click(function(){ //反選按鈕：選中變為未選中，未選中變為選中 $("input[name='items']").each(function(){ //alert(this.checked);//正在遍歷的dom物件 this.checked = !this.checked; });//設定不同的值 無法隱式迭代 }); $("#sendBtn").click(function(){ //④提交按鈕：點選後依次彈出選中內容 //獲取選中的複選框 $("[name='items']:checked").each(function(){ alert(this.value); }); }); }); </script> </head> <body> <form method="post" action=""> 熟悉的程式語言是： <br /> <input type="checkbox" name="items" value="C語言" />C語言 <input type="checkbox" name="items" value="C++語言" />C++語言 <input type="checkbox" name="items" value="python語言" />python語言 <input type="checkbox" name="items" value="Java語言" />Java語言 <br /> <input type="button" id="checkedAllBtn" value="全 選" /> <input type="button" id="checkedNoBtn" value="全不選" /> <input type="button" id="checkedRevBtn" value="反 選" /> <input type="button" id="sendBtn" value="提 交" /> </form> </body> </html>