全选与反选按钮的实现

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全选与反选按钮的实现相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<script>
//删除确认
function del(){
 if(!window.confirm(‘是否要删除数据??‘))
    return false;
}
//全部选择/取消
function chek(){
     var leng = this.form1.chk.length;
     if(leng==undefined){
       leng=1;
       if(!form1.chk.checked)
           document.form1.chk.checked=true;
        else
            document.form1.chk.checked=false;
     }else{
       for( var i = 0; i < leng; i++)
        {
            if(!form1.chk[i].checked)
                  document.form1.chk[i].checked = true;
            else
                document.form1.chk[i].checked = false;
        }
     }
    return false;
}
</script>
</head>
<body>


<form name="form1" id="form1" method="post" action="deletes.php">
  <tr>
      <td >&nbsp;</td>
    <td >昵称</td>
    <td >内容</td>
    <td >联系方式</td>
    <td >创建时间</td>
    <td >操作</td>
  </tr>
<hr>
    <tr>
      <input type=checkbox name=‘chk[]‘ id=‘chk‘ value="">
        
      <td ><a href=‘#‘>修改</a>/<a href=‘#‘>删除</a></td>
      <input type=checkbox name=‘chk[]‘ id=‘chk‘ value="">

      
      <td ><a href=‘#‘>修改</a>/<a href=‘#‘>删除</a></td>
      <input type=checkbox name=‘chk[]‘ id=‘chk‘ value="">

      <td ><a href=‘#‘>修改</a>/<a href=‘#‘>删除</a></td>
      <input type=checkbox name=‘chk[]‘ id=‘chk‘ value="">

      <td ><a href=‘#‘>修改</a>/<a href=‘#‘>删除</a></td>

    </tr>
<hr>
<tr>
    <td height="25" colspan="7" class="m_td" align="left">
    <a href="" onClick="return chek();">全部选择/取消</a>
    <input type="hidden" name="action" value="delall">
    <input type="submit" value="删除选择" onclick = ‘return del();‘></td>
</tr>
</form>

</body>
</html>

以上是关于全选与反选按钮的实现的主要内容，如果未能解决你的问题，请参考以下文章

html+css+js实现复选框全选与反选