javascript实现复选框的全选和恢复默认

最新推荐文章于 2024-02-20 13:42:03 发布

iteye_2903

最新推荐文章于 2024-02-20 13:42:03 发布

阅读量580

点赞数

分类专栏： javascript 文章标签： JavaScript 工作 HTML ViewUI

本文链接：https://blog.csdn.net/iteye_2903/article/details/81689437

版权

javascript 专栏收录该内容

112 篇文章 1 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
   <TITLE>New Document</TITLE>
   <script language=javascript> 
<!-- 全选 -->     
function   checkAll(item)  
{  
      var   a   =   document.getElementsByName("power");  
      for   (var   i=0;   i<a.length;   i++){  
          a[i].checked   =   item.checked;  
      }  
     var temp=document.getElementsByName("default");
     temp[0].checked=false;   
}
<!-- 恢复默认 -->
function setDefault(item){
var   a   =   document.getElementsByName("power");  
      for   (var   i=0;   i<a.length;   i++){  
          a[i].checked   =false;  
      }
      a[0].checked   =   item.checked;
      a[1].checked   =   item.checked;
      a[2].checked   =   item.checked;
      a[3].checked   =   item.checked;
      a[4].checked   =   item.checked;
      a[5].checked   =   item.checked;
      a[6].checked   =   item.checked;
      a[7].checked   =   item.checked;
      a[8].checked   =   item.checked;

      var temp=document.getElementsByName("all")
      temp[0].checked=false;
}
</script>
</HEAD>
<BODY>
   <form name="pageSetForm">
    <table width="80%" border="1" align="center" cellpadding="0"
     bordercolor="#8AB78A" cellspacing="0">
     <tr>
      <td>
       <input type="checkbox" name="power" value="1">
       教师姓名
      </td>
      <td>
       <input type="checkbox" name="power" value="2">
       性别
      </td>
      <td>
       <input type="checkbox" name="power" value="4">
       出生日期
      </td>
      <td>
       <input type="checkbox" name="power" value="8">
       学历
      </td>
     </tr>
     <tr>
      <td>
       <input type="checkbox" name="power" value="16">
       职称
      </td>
      <td>
       <input type="checkbox" name="power" value="32">
       手机电话
      </td>
      <td>
       <input type="checkbox" name="power" value="64">
       座机电话
      </td>
      <td>
       <input type="checkbox" name="power" value="128">
       工作单位
      </td>
     </tr>
     <tr>
      <td>
       <input type="checkbox" name="power" value="256">
       部门
      </td>
      <td>
       <input type="checkbox" name="power" value="512">
       是否为本校教师
      </td>
      <td>
       <input type="checkbox" name="power" value="1024">
       毕业时间
      </td>
      <td>
      <input type="checkbox" name="power" value="2048">
       政治面貌
      </td>
     </tr>
     <tr>
      <td>
       <input type="checkbox" name="power" value="4096">
       婚否
      </td>
      <td>
       <input type="checkbox" name="power" value="8192">
       开始工作时间
      </td>
      <td>
       <input type="checkbox" name="power" value="16384">
       毕业学校
      </td>
      <td>
       <input type="checkbox" name="power" value="32768">
       所学专业
      </td>
     </tr>
     <tr>
      <td>
       <input type="checkbox" name="power" value="65536">
       籍贯
      </td>
      <td>
       <input type="checkbox" name="power" value="131072">
       照片
      </td>
      <td>
       <input type="checkbox" name="power" value="262144">
       学位
      </td>
      <td>
       <input type="checkbox" name="power" value="524288">
       Email
      </td>
     </tr>
    </table>
    <br>
    <input type="checkbox" onclick="setDefault(this)" name="all"
     value="恢复默认">
    恢复默认
    <input type="checkbox" onclick="checkAll(this)" name="all" value="全选">
    全选
   </form>
</BODY>
</HTML>