jQuery實現簡單全選、反選、全不選功能
阿新 • • 發佈：2019-02-12
例子：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="Scripts/jquery-1.11.3.js"></script> <script> $(function () { //全選 //新增全選事件 $("#Button1").click(function () { //獲取屬性名為name='checkbox'，然後新增checked= true，實現全選 $("input[name='checkbox']").prop("checked", "true"); }); //反選 //新增全飯選事件 $("#Button2").click(function () { //獲取屬性名為name='checkbox'對其進行便利迴圈 $("input[name='checkbox']").each(function () { //判斷checked屬性值，如果有則刪除，如果沒有則新增 if ($(this).prop("checked")) { $(this).removeAttr("checked") } else { $(this).prop("checked", "true"); } }); }); //全不選 //新增全不飯選事件 $("#Button3").click(function () { //獲取屬性名為name='checkbox'，刪除所有checked屬性 $("input[name='checkbox']").removeAttr("checked"); }); }); </script> </head> <body> <div> <input id="Checkbox1" type="checkbox" name="checkbox"/>籃球 <br /> <input id="Checkbox2" type="checkbox" name="checkbox"/>乒乓球 <br /> <input id="Checkbox3" type="checkbox" name="checkbox"/>足球 <br /> <input id="Checkbox4" type="checkbox" name="checkbox"/>羽毛球 <br /> <input id="Checkbox5" type="checkbox" name="checkbox"/>檯球 <br /> ================================================= <br /> <input id="Button1" type="button" value="全選" /> <input id="Button2" type="button" value="反選" /> <input id="Button3" type="button" value="全不選" /> </div> </body> </html>
效果：
