`

checkbox 全选和取消全选

阅读更多
<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
function checkAll(e,itemName){    //全选函数 e为全选对象,itemName 为子name
 var aa=document.getElementsByName(itemName);
 for(var i=0;i<aa.length;i++){
  aa[i].checked=e.checked;
 }
}

function checkItem(e,allName){   //当选取或取消选取没一个复选框时调用的函数 
 var all=document.getElementById(allName); //全选框对象
 if(!e.checked){      //如果是取消选取那么全选框就取消选取
  all.checked=false;
 }
 else{                 //如果是选取,就要判断其他是否都已经全部选取了
  var aa=document.getElementsByName(e.name);
  for(var i=0;i<aa.length;i++){
   if(!aa[i].checked){//如果有一个没有选上,那么就返回
    return;
   }
  }
  all.checked=true;//如果其他都选上了,全选框就要选上
 }
}
</script>
<head>
<body>
 <div id='container'>
      <table border=1 id='table1'>
        <tr>
            <th class='td1'><input type=checkbox id='selectAll' onclick='checkAll(this,"cb");'><label for='selectAll'>全选</label></th>
            <th>text</th>
        </tr>
        
        <tr>
            <td class='td1'><input type=checkbox name='cb' onclick='checkItem(this,"selectAll");'></td>
            <td class='center'>11111</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'
			onclick='checkItem(this,"selectAll");'></td>
            <td class='center'>22222</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'
			onclick='checkItem(this,"selectAll");'></td>
            <td class='center'>33333</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'
			onclick='checkItem(this,"selectAll");'></td>
            <td class='center'>44444</td>
        </tr>

      </table>

    </div>
</body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics