`

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

JavaScript工作HTML 
阅读更多 
<!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>
分享到：
| 既能实现下拉又能实现输入的文本框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2 .0

    在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中，我们将探讨如何利用JavaScript实现对复选框（checkbox）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...

    js checkbox全选 反选 取消全部设置表单html复选框勾选

    在网页开发中，JavaScript（简称JS...总之，通过JavaScript，我们可以轻松地实现HTML表单中复选框的全选、反选和取消全部勾选功能，从而提高用户界面的互动性和实用性。了解并掌握这些基本技巧是前端开发中的重要一环。

    layui复选框的全选与取消实现方法

    本文将详细讲解如何使用 Layui 实现复选框的全选与取消功能，这对于用户交互和数据筛选至关重要。 首先，我们来看一下 HTML 结构。在给出的示例中，可以看到有两个级别的复选框：一级复选框（全选/取消）和二级复选...

    超炫的复选框效果源码

    7. **复选框组**：在网格布局中，可能会有多个复选框组成一个组，实现联动或互斥的效果，例如全选/全不选、多选框之间的影响等。 8. **自定义图标**：替换默认的勾选图标，使用自定义的SVG图标或者其他图形，使得复...

    dtree新改版-添加checkbox复选框

    由于原版dtree作者没有加上复选框功能，我用来做用户模块权限功能的时候很不好用，网上也找到一些基于dtree添加了checkbox的修改版，但是用起来很不顺手，最后不得不根据自己的需要一再修改成了现在这个版本。...

    js复选框（checkbox）

    下面我们将深入探讨复选框的相关知识点和实现技巧。 1. **复选框基本结构**： 复选框在HTML中的表示方式是`&lt;input&gt;`标签，类型设置为`checkbox`。例如： ```html ``` 其中，`id`用于唯一标识复选框，`name`...

    下拉复选框

    在网页设计和开发中，"下拉复选框"是一种常用的交互元素，它结合了下拉菜单和复选框的功能，允许用户在一个列表中选择一个或多个选项。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及动画效果...

    【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx

    在el-tree中，如果需要实现多选（复选框）功能，我们可以利用`show-checkbox`属性来开启复选框。在处理父子节点之间的关联性时，`check-strictly`属性扮演着关键角色。 `check-strictly`属性决定了父子节点之间是否...

    基于jQuery实现复选框的全选 全不选 反选功能

    在这篇文章中，我们将会详细介绍如何使用jQuery来实现复选框的全选、全不选和反选功能。这些操作广泛应用于表单处理中，使得用户能够更加便捷地进行多项选择操作。文章首先提供了一段jQuery代码，接着是相应的HTML...

    html+javascript+bootstrap实现层级多选框全层全选和多选功能

    在这种情况下，我们可以使用`&lt;ul&gt;`和`&lt;li&gt;`元素来表示层级关系，每个层级的顶级选项是一个复选框，子级选项也是复选框。例如： ```html ('checkbox_v1', 'checkbox1')"&gt; 版本一&lt;b class="caret"&gt;&lt;/b&gt; &lt;li&gt; ('...

    combogrid 本地搜索多列匹配及复选框选中问题

    ### combogrid 本地搜索多列匹配及复选框选中问题 #### 一、问题背景与概述 在使用EasyUI框架中的`combogrid`组件时，可能会遇到两个主要问题：一是本地模糊搜索功能在多列上的实现；二是点击复选框时，无法正确...

    js checkbox全选 反选 取消全部设置表单checkbox复选框勾选

    本篇文章将详细讲解如何利用JavaScript实现`checkbox`的全选、反选和取消全部功能，以及相关的代码示例。 ### 1. `checkbox`基本概念 `checkbox`在HTML中通过`&lt;input type="checkbox"&gt;`标签创建。默认情况下，`...

    SimpleTree扩展：支持checkbox节点选择(半选、全选、不选)

    全选则会将树中的所有节点标记为选中状态，这通常伴随着一个顶级复选框，当用户点击该框时，整个树的所有节点都会被选中。而不选则是取消节点的选中状态，用户可以清除已选择的节点，恢复到默认的未选中状态。 实现...

    layui表格checkbox选择全选样式及功能的实例

    在实现全选功能时，通过form.on监听全选复选框的事件，当全选复选框状态变化时，使用jQuery遍历表格体内的所有checkbox，将它们的checked属性设置为全选复选框的checked属性值。完成这一步后，还需调用Layui的form....

    Laravel-admin表单Form多级下拉复选框组件multiCheckbox（优化版）.rar

    这个优化版的 `multiCheckbox` 组件不仅提升了开发效率，还优化了用户交互体验，使得在 Laravel-admin 中实现多级下拉复选框功能变得更加简单。对于需要处理层级数据的项目来说，这是一个非常实用的工具。通过深入...

    javascript实现checkbox复选框实例代码

    首先，我们来关注复选框的美化操作。默认情况下，`checkbox`的样式由浏览器控制，样式单一且不够美观。通过CSS，我们可以自定义其外观。在提供的代码示例中，CSS类`.CheckBoxClass`被用来隐藏原始的`checkbox`，而`....

    Extjs全选去掉

    在ExtJS的表格组件中，全选功能是通过一个特殊的行或者复选框实现的，这个全选复选框位于表格的列头中。当用户勾选这个复选框时，所有行的数据项都会被选中；反之，如果取消选中，所有行则会被取消选中。这种功能在...

    JavaScript实现GriwView单列全选(自写代码)

    - 当我们需要实现单列复选框全选或全不选的功能时，传统的做法是遍历页面上的所有复选框，并将它们的checked属性设置为true或false，但这样会作用于所有复选框，而不是单列。 - 为了解决这一问题，可以编写...

    基于JavaScript实现带数据验证和复选框的表单提交

    总结起来，这个示例展示了如何利用JavaScript和jQuery实现一个交互式的表单，包括数据验证、复选框的全选/反选功能以及阻止无效表单提交。这样的功能提高了用户体验，确保了收集到的数据质量。在实际项目中，可以...

    使用vue.js实现checkbox的全选和多个的删除功能

    在前端开发中，经常会遇到需要通过复选框（checkbox）来完成全选或者部分选择的情况。尤其是在表单、列表等场景中，对于多选操作的实现显得尤为重要。Vue.js 作为一套用于构建用户界面的渐进式JavaScript框架，为...

Magicbox
Global site tag (gtag.js) - Google Analytics