<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>复选框的全选、反选</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="../jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ /* * 功能：实现复选框背景变色 */ //var cBoxSlaves = $('input[id^="cBoxId"]'); //各个分被控复选框对象Id var cBoxSlaves = $('input[name="arrName[]"]'); //各个分被控复选框对象Name //下面控制选中变色 cBoxSlaves.click(function(){ if($(this).attr('checked')=='checked'){ $(this).parent().parent().css('background','#ccccff'); //设置背景色 }else{ $(this).parent().parent().css('background',''); //更改背景色 } }); }); /* * 功能：实现全选、全不选、反选控件 * 参数：masterObj 总控件对象 * action 动作：1全选；0反选； */ function cBoxMulti(masterObj,action){ var cBoxMaster = $(masterObj); //总控件对象 //var cBoxSlaves = $('input[id^="cBoxId"]'); //各个分被控复选框对象Id var cBoxSlaves = $('input[name="arrName[]"]'); //各个分被控复选框对象Name if(action==1){ //全选/全不选 if(cBoxMaster.attr('checked')=='checked'){ cBoxSlaves.attr('checked',true); cBoxSlaves.parent().parent().css('background','#ccccff'); //设置背景色 }else{ cBoxSlaves.attr('checked',false); cBoxSlaves.parent().parent().css('background',''); //更改背景色 } }else if(action==0){ //反选 cBoxSlaves.each(function(){ //遍历分控件s，使其反选 if($(this).attr('checked')=='checked'){ $(this).attr('checked',false); $(this).parent().parent().css('background',''); //更改背景色 }else{ $(this).attr('checked',true); $(this).parent().parent().css('background','#ccccff'); //设置背景色 } }); } } </script> </head> <body> <table border="1" width="100%" cellspacing="0" cellpadding="0"> <form action="" method="post"> <tr> <th>复选</th> <th>Header2</th> </tr> <tr> <td><input type="checkbox" id="cBoxId1" name="arrName[]" value="1" /></td> <td>data1_2</td> </tr> <tr> <td><input type="checkbox" id="cBoxId2" name="arrName[]" value="2" /></td> <td>data1_2</td> </tr> <tr> <td><input type="checkbox" id="cBoxId3" name="arrName[]" value="3" /></td> <td>data1_2</td> </tr> <tr> <td><input type="checkbox" id="cBoxId4" name="arrName[]" value="4" /></td> <td>data1_2</td> </tr> <tr> <td><input type="checkbox" id="cBoxId5" name="arrName[]" value="5" /></td> <td>data1_2</td> </tr> <tr> <td> <input type="checkbox" onclick="cBoxMulti(this,1)" />全选 <input type="checkbox" onclick="cBoxMulti(this,0)" />反选 </td> <td>data1_2</td> </tr> </form> </table> </body> </html>