全选全部选改进效果 

<title>复选框选中效果</title>
<style type="text/css">
table {
    width: 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;
     }
}

 

posted @ 2013-11-16 13:41  914556495  阅读(154)  评论(0)    收藏  举报