JQuery学习(4)全选反选功能的实现
$(function () { $('#chkall').click(function () { /*if ($(this).is(':checked') == true) { $('table input[type=checkbox]').attr('checked', true); } else { $('table input[type=checkbox]').attr('checked', false); }*/ //简单写法 $('table input[type=checkbox]').attr('checked', $(this).is(':checked')); if (this.checked) { $('#sp1').text('取消全选'); } else { $('#sp1').text('全选'); } //alert($('#chkall').attr('checked')); //另一种方法,使用js获取全选复选框的选中状态 //$('table input[type=checkbox]').attr('checked',this.checked); }) $('#chkrevert').click(function () { //方法1: /*var allcheck = $('table input[type=checkbox]'); for (var i = 0; i < allcheck.length; i++) { if (allcheck[i].checked) { allcheck[i].checked = false; } else { allcheck[i].checked = true; } }*/ var allcheck = $('table input[type=checkbox]'); allcheck.each(function () { if ($(this).is(':checked')) { $(this).attr('checked', false); } else { $(this).attr('checked', true); } }) })
<input id="chkall" type="checkbox" /><span id="sp1">全选</span><input id="chkrevert" type="checkbox" />反选</div> <table> <tr> <td> 操作 </td> <td> 编号 </td> <td> 名称 </td> <td> 作者 </td> <td> 封面 </td> <td> 单价 </td> </tr> <tr> <td> <input id="Checkbox1" type="checkbox" /> </td> <td> 001 </td> <td> 三国演义 </td> <td> 罗贯中 </td> <td> <img src="images/2.jpg" /> </td> <td> 45 </td> </tr> <tr> <td> <input id="Checkbox2" type="checkbox" /> </td> <td> 002 </td> <td> 西游记 </td> <td> 吴承恩 </td> <td> <img src="images/3.jpg" /> </td> <td> 40 </td> </tr> <tr> <td> <input id="Checkbox3" type="checkbox" /> </td> <td> 003 </td> <td> 水浒传 </td> <td> 施耐庵 </td> <td> <img src="images/4.jpg" /> </td> <td> 50 </td> </tr> <tr> <td> <input id="Checkbox4" type="checkbox" /> </td> <td> 004 </td> <td> 红楼梦 </td> <td> 曹雪芹 </td> <td> <img src="images/5.jpg" /> </td> <td> 100 </td> </tr> <tr> <td> <input id="Checkbox5" type="checkbox" /> </td> <td> 005 </td> <td> 家 </td> <td> 巴金 </td> <td> <img src="images/6.jpg" /> </td> <td> 45 </td> </tr> <tr> <td> <input id="Checkbox6" type="checkbox" /> </td> <td> 006 </td> <td> 茶馆 </td> <td> 老舍 </td> <td> <img src="images/7.jpg" /> </td> <td> 35 </td> </tr> </table>