JQuery 迴圈遍歷 , 複選框全選全消反選checked屬性
阿新 • • 發佈：2019-02-17
陣列 集合的遍歷 $.each(list,function(index,item){ this. //this就表示item});
jquery物件的迴圈遍歷 jquery物件.each(function(){ this. //this就表示迴圈的jquery物件});
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="scripts/jquery-1.7.1.min.js"></script> <script> var list = [ { id: '1', country: '中國', capital: '北京' }, { id: '2', country: '美國', capital: '華盛頓' }, { id: '3', country: '日本', capital: '東京' }, { id: '4', country: '韓國', capital: '首爾' } ]; $(function () { //生成表格資料。 陣列 集合的遍歷$.each $.each(list, function() { $('<tr id="'+this.id+'">' + '<td><input type="checkbox"/></td>' + '<td>'+this.id+'</td>' + '<td>'+this.country+'</td>' + '<td>'+this.capital+'</td>' + '<td><input type="button" value="修改"/></td>' + '</tr>').appendTo('#list'); }); //為複選框chkAll設定點選事件，完成全選、全消的功能 $('#chkAll').click(function () { //根據當前複選框的狀態設定其它行復選框的狀態 $('#list :checkbox').attr('checked', this.checked); //隱私迭代，選擇器中的所有jquery物件的checked屬性都設定成 #chkAll 的checked值。 }); //反選。 $('#btnReverse').click(function () { //jquery物件的迴圈遍歷 jquery物件.each $('#list :checkbox').each(function() {//jquery物件.each this.checked = !this.checked; //checked 反選 }); }); }); </script> </head> <body> <input type="button" id="btnReverse" value="反轉"/> <table border="1"> <thead> <th width="100"><input type="checkbox" id="chkAll"/></th> <th width="100">編號</th> <th width="100">國家</th> <th width="100">首都</th> <th width="100">修改</th> </thead> <tbody id="list"> </tbody> </table> </body> </html>