<title>复选框选中效果</title> <style type="text/css"> table { 400px; margin-top: 5px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border-top:1px solid #666666; border-left:1px solid #666666; } td{ font-size:12px; line-height:25px; text-align:center; border-right:1px solid #666666; border-bottom:1px solid #666666; } </style> <script src="js/checkall.js"></script> </head> <body><table border="0" cellspacing="0" cellpadding="0"> <tr style=" font-weight:bold; "> <td><input id="all" type="checkbox" value="全选" onclick="checkAll()" />全选</td> <td>产品名称</td> <td>价格（元）</td> <td>数量</td> </tr> <tr> <td><input name="ic" type="checkbox" value="诺基亚" onclick="checkSingle()" /></td> <td>诺基亚N85手机</td> <td>2589</td> <td>6</td> </tr> <tr> <td><input name="ic" type="checkbox" value="佳能" onclick="checkSingle()" /></td> <td>佳能IXUS95ISY数码相机</td> <td>1865</td> <td>5</td> </tr> <tr> <td><input name="ic" type="checkbox" value="戴尔" onclick="checkSingle()"/></td> <td>戴尔新版SK8115键盘</td> <td>60</td> <td>56</td> </tr> <tr> <td><input name="ic" type="checkbox" value="联想" onclick="checkSingle()" /></td> <td>联想折叠式笔记本电脑桌</td> <td>59</td> <td>10</td> </tr> <tr> <td><input name="ic" type="checkbox" value="康佳" onclick="checkSingle()" /></td> <td>康佳32英寸液晶电视</td> <td>2945</td> <td>3</td> </tr> <tr> <td><input name="ic" type="checkbox" value="九阳" onclick="checkSingle()"/></td> <td>九阳JYDX-78D五谷系列豆浆机</td> <td>299</td> <td>8</td> </tr> <tr> <td colspan="4" style="text-align:left; font-weight:bold; padding-left:15px;">删除选中的产品</td> </tr> </table> </body>
function checkAll(){ var oInput=document.getElementsByName("ic"); for (var i=0;i<oInput.length;i++){ if (document.getElementById("all").checked==true){ oInput[i].checked=true; } else { oInput[i].checked=false; } } } function checkSingle(){ var oInput=document.getElementsByName("ic"); var j=0; for(var i=0;i<oInput.length;i++){ if (oInput[i].checked==true){ j=j+1; } } if(j==oInput.length){ document.getElementById("all").checked=true; } else{ document.getElementById("all").checked=false; } }