`

复选框的全选，多选，全选,全不选，反选_转

JavaScriptHTML 
阅读更多
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >   
  2. < HTML >   
  3. < HEAD >   
  4. < TITLE >  复选框的全选，多选，全不选，反选  </ TITLE >   
  5. < META   NAME = "Generator"   CONTENT = "EditPlus" >   
  6. < META   NAME = "Author"   CONTENT = "" >   
  7. < META   NAME = "Keywords"   CONTENT = "" >   
  8. < META   NAME = "Description"   CONTENT = "" >   
  9.   
  10.   
  11. </ HEAD >   
  12.   
  13. < BODY >   
  14. <!--复选框的全选，多选，全不选，反选   -->   
  15. < form   name = hrong >    
  16. < input   type = checkbox   name = All   onclick = "checkAll('mm')" > 全选 < br />    
  17. < input   type = checkbox   name = mm   onclick = "checkItem('All')" > < br />    
  18. < input   type = checkbox   name = mm   onclick = "checkItem('All')" > < br />    
  19. < input   type = checkbox   name = mm   onclick = "checkItem('All')" > < br />    
  20. < input   type = checkbox   name = mm   onclick = "checkItem('All')" > < br />    
  21. < input   type = checkbox   name = mm   onclick = "checkItem('All')" > < br /> < br />    
  22.   
  23.   
  24. < input   type = checkbox   name = All2   onclick = "checkAll('mm2')" > 全选 < br />    
  25. < input   type = checkbox   name = mm2   onclick = "checkItem('All2')" > < br />    
  26. < input   type = checkbox   name = mm2   onclick = "checkItem('All2')" > < br />    
  27. < input   type = checkbox   name = mm2   onclick = "checkItem('All2')" > < br />    
  28. < input   type = checkbox   name = mm2   onclick = "checkItem('All2')" > < br />    
  29. < input   type = checkbox   name = mm2   onclick = "checkItem('All2')" > < br />    
  30.   
  31. </ form >    
  32.   
  33. < SCRIPT   LANGUAGE = "JavaScript" >    
  34. function checkAll(str)   
  35. {   
  36.     var a  =  document .getElementsByName(str);   
  37.     var n  =  a .length;   
  38.     for (var i = 0 ; i < n ; i++)   
  39.     a[i].checked  =  window .event.srcElement.checked;   
  40. }   
  41. function checkItem(str)   
  42. {   
  43.     var e  =  window .event.srcElement;   
  44.     var all  =  eval ("document.all."+ str);   
  45.     if (e.checked)   
  46.     {   
  47.         var a  =  document .getElementsByName(e.name);   
  48.         all.checked  =  true ;   
  49.         for (var i = 0 ; i < a.length ; i++)   
  50.         {   
  51.             if (!a[i].checked)  
  52.             {   
  53.                 all.checked  =  false ; break;  
  54.             }   
  55.         }  
  56.     }   
  57.     else   
  58.         all.checked  =  false ;   
  59. }  
  60. </ SCRIPT >    
  61.   
  62.   
  63. </ BODY >   
  64. </ HTML >  
分享到：
| js_只能输入数字_转
评论
发表评论

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

相关推荐

    Axure RP 复选框全选、反选

    用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。

    树结构 复选框 多选 全选功能

    通过学习和理解这些代码，开发者可以掌握如何在实际项目中实现树结构的复选框多选全选功能。 总之，理解和实现"树结构 复选框 多选 全选功能"是提升前端开发技能的重要一环。它要求开发者具备数据结构知识、事件...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

    html JavaScript js复选框的全选，多选，全选,全不选，反选

    在本例中，我们关注的是如何利用JavaScript处理复选框的全选、多选、全不选以及反选操作。复选框是HTML表单元素之一，允许用户在多个选项中进行多选。 首先，我们需要创建一个包含多个复选框的HTML结构。例如： ``...

    Pyqt5 QTableWidget/QTableView 行表头添加复选框全选功能

    通过以上代码，我们就实现了`QTableWidget`的表头复选框全选功能。对于`QTableView`，可以使用`QStandardItemModel`和`QStandardItem`代替`QTableWidgetItem`，原理相同。 这个过程涉及到的知识点包括： - PyQt5的...

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

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

    C#复选框实现全选反选和全不选

    在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...

    复选框的全选和反选、复选框的全选和反选

    复选框在用户界面设计中扮演着重要角色，它们允许用户在多个选项中进行多选操作。全选和反选功能则是复选框常用的一种交互模式，极大地提升了用户体验，特别是当选项数量较大时。本文将深入探讨复选框的全选和反选...

    JQ 复选框全选反选

    在实现复选框全选功能时，我们可以创建一个复选框，它的勾选状态将决定其他所有复选框的状态。例如，我们可以设置一个ID为"selectAll"的复选框，并绑定"click"事件，当用户点击这个复选框时，触发相应的函数，将所有...

    实现table表格checkbox复选框的全选 反选

    在网页开发中，表格（Table）是常用的数据展示方式，而复选框（Checkbox）则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能，能够大大提升用户体验，使用户可以便捷地选择一组数据。这里我们将详细...

    带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选

    在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`&lt;input&gt;`标签定义，类型为...

    juqery实现复选框全选/反选demo源码

    在标题"jQuery实现复选框全选/反选demo源码"中，我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用，比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码，...

    angularjs实现的checkbox多选、全选、反选

    在本文中，我们将深入探讨如何使用AngularJS实现一个功能完备的复选框（checkbox）系统，包括多选、全选和反选功能。这个系统的一个关键特性是它完全基于AngularJS，无需依赖其他源数据，因此可以确保原始数据的完整...

    jquery 实现全选，全不选，反选，获取选中的值

    与全选相反，全不选功能用于取消所有子复选框的选择。这可以通过设置 `checked` 属性为 `false` 来实现。我们可以修改上面的全选事件处理函数，添加一个条件判断，当“全选”复选框未被选中时，取消所有子复选框的...

    ListView多选,全选,反选,全不选

    在实际项目中，还可以根据需求进一步优化，比如添加条目的复选框样式，或者使用ExpandableListView来展示层级结构的数据。在ListViewSelect这个压缩包文件中，可能包含了实现这些功能的示例代码，你可以参考学习并...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    当树形组件结合复选框时，可以实现用户对节点的选择操作，如全选、反选、子选父以及父选子。这些功能在数据管理、权限分配等场景中非常实用。 首先，我们要理解ExtJS树形组件的基本构造。一个树形组件由节点（Nodes...

    微信小程序获取复选框全选反选选中的值(实例代码)

    wxml文件 全选 &lt;view class=th&gt;id 名称 &lt;checkbox value

    微信小程序实现多选框全选与取消全选功能示例

    本文实例讲述了微信小程序实现多选框全选与取消全选功能。分享给大家供大家参考，具体如下： js部分： page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",...

    复选框的全选，反选、脚本、javascript实现、无刷新

    本文将详细介绍如何使用JavaScript实现复选框的全选、反选功能，并探讨相关的脚本编写技巧。 首先，我们需要理解复选框的基本HTML结构。一个简单的复选框标签是这样的： ```html ``` 这里的`type="checkbox"`...

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