`
mowengaobo
  • 浏览: 165130 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

采用JAVASCRIPT实现全选的三种情况 转

    博客分类：
  • js
JavaScriptHTML 
阅读更多

 

采用JAVASCRIPT实现全选的三种情况

通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：
1、  当前页面中所有的CHECKBOX全部选中 及取消 。
2、  当前页面中所有同名的CHECKBOX全部选中。
3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。
这里以实例的形式，展示了三种情况的操作，完整源代码如下：
Html代码 复制代码
  1. < html >   
  2.   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312" >   
  5. < title > 全选示例 </ title >   
  6. </ head >   
  7.   
  8. < body >   
  9. < form   action = ""   method = "post"   name = "loginForm" >   
  10. /********************全选示例********************/ < br >   
  11. < b > 水果（checkbox同名）： </ b > < br >   
  12. < input   type = "checkbox"   name = "fruit"   value = "1" > 苹果 < br >   
  13. < input   type = "checkbox"   name = "fruit"   value = "2" > 梨 < br >   
  14. < input   type = "checkbox"   name = "fruit"   value = "3" > 桃 < br >   
  15. < input   type = button   value = "全选水果"   onclick = "checkAllFruit()" >   
  16. < input   type = button   value = "取消全选水果"   onclick = "unCheckAllFruit()" > < br >   
  17.   
  18. < b > 蔬菜： </ b > < br >   
  19. < input   type = "checkbox"   name = "vegetable"   value = "4" > 大白菜 < br >   
  20. < input   type = "checkbox"   name = "vegetable"   value = "5" > 西红柿 < br >   
  21.   
  22. < b > 水果2（checkbox不同名，具有相同的前缀名）： </ b > < br >   
  23. < input   type = "checkbox"   name = "_fruit1"   value = "6" > 苹果 < br >   
  24. < input   type = "checkbox"   name = "_fruit2"   value = "7" > 梨 < br >   
  25. < input   type = "checkbox"   name = "_fruit3"   value = "8" > 桃 < br >   
  26. < input   type = button   value = "全选水果2"   onclick = "checkAllFruit2()" >   
  27. < input   type = button   value = "取消全选水果2"   onclick = "unCheckAllFruit2()" > < br >   
  28.   
  29. < input   type = "checkbox"   name = "vegetable"   onclick = "doChangeCheckStatus(this);" > 全选   
  30. < input   type = button   value = "所有全选"   onclick = "checkAll()" >   
  31. < input   type = button   value = "取消所有全选"   onclick = "unCheckAll()" >   
  32.   
  33. </ form >   
  34. </ body >   
  35. </ html >   
  36. < Script   language = "JavaScript" > ...   
  37. function checkAll()   
  38. ...{   
  39.   
  40.     var  objs  =  document .getElementsByTagName("input");   
  41.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  42.             if(objs[i].type.toLowerCase() == "checkbox" )   
  43.                  objs[i] .checked  =  true ;   
  44.   
  45.       }           
  46.   
  47. }   
  48. function checkAllFruit()   
  49. ...{   
  50.   
  51.     var  objs  =  document .getElementsByTagName("input");   
  52.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  53.             if(objs[i].type.toLowerCase() == "checkbox" )   
  54.             if(objs[i].name.toLowerCase() == "fruit")               
  55.                     objs[i] .checked  =  true ;   
  56.   
  57.       }           
  58.   
  59. }   
  60. function checkAllFruit2()   
  61. ...{   
  62.   
  63.     var  objs  =  document .getElementsByTagName("input");   
  64.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  65.             if(objs[i].type.toLowerCase() == "checkbox" )   
  66.             if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")   
  67.             ...{                   
  68.                     objs[i] .checked  =  true ;   
  69.             }   
  70.                
  71.       }           
  72.   
  73. }   
  74. function unCheckAll()   
  75. ...{   
  76.   
  77.     var  objs  =  document .getElementsByTagName("input");   
  78.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  79.             if(objs[i].type.toLowerCase() == "checkbox" )               
  80.                     objs[i] .checked  =  false ;   
  81.   
  82.       }           
  83.   
  84. }   
  85. function unCheckAllFruit()   
  86. ...{   
  87.   
  88.     var  objs  =  document .getElementsByTagName("input");   
  89.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  90.             if(objs[i].type.toLowerCase() == "checkbox" )   
  91.             if(objs[i].name.toLowerCase() == "fruit")   
  92.                     objs[i] .checked  =  false ;   
  93.   
  94.       }           
  95.   
  96. }   
  97. function unCheckAllFruit2()   
  98. ...{   
  99.   
  100.     var  objs  =  document .getElementsByTagName("input");   
  101.     for(var  i = 0 ; i < objs.length ; i++) ...{   
  102.             if(objs[i].type.toLowerCase() == "checkbox" )   
  103.             if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")   
  104.                     objs[i] .checked  =  false ;   
  105.   
  106.       }           
  107.   
  108. }   
  109. function doChangeCheckStatus(obj)   
  110. ...{   
  111.     if( obj.checked ==true)   
  112.     ...{   
  113.         checkAll();   
  114.     }   
  115.     else   
  116.     ...{   
  117.         unCheckAll();   
  118.     }   
  119. }   
  120.   
  121. </ script >  
分享到：
| plsql 意外 drop table 如何找回。
评论
发表评论

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

相关推荐

    GridView使用div分页，checkbox全选

    本文将深入探讨如何使用div进行GridView的分页，并结合checkbox实现全选功能。 首先，GridView通过div进行分页的原理是利用JavaScript和AJAX技术在客户端动态加载和显示数据，而不是每次点击分页按钮时都向服务器...

    javascript全选反选

    8. **jQuery库的使用**：虽然现在许多开发者倾向于使用原生JavaScript，但jQuery库提供了一套简便的API，如`$.each()`和`$(selector).prop('checked', value)`，对于快速实现全选和反选功能也很有帮助。 9. **AJAX...

    struts2标签 全选,反选

    ### JavaScript函数实现全选与反选 为了实现全选和反选的功能，给定内容中的`&lt;script&gt;`标签内包含了`selectAll()`函数。此函数通过获取页面上所有的复选框元素，并根据`doAllSele`复选框的状态（即是否被选中），...

    购物车的全选，全不选，局部全选，全选判定

    在这种情况下，为每个类别提供一个全选按钮，可以实现这个需求。前端需要维护每个类别商品的选中状态，并根据用户对分类全选按钮的操作，更新相应类别的商品状态。后端需要相应地处理这些局部选择的变化。 4. **...

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

    全选和反选功能则是复选框常用的一种交互模式，极大地提升了用户体验，特别是当选项数量较大时。本文将深入探讨复选框的全选和反选机制及其在IT中的应用。 全选功能是指用户只需点击一个按钮或复选框，就能同时选中...

    自定义购物车二级checkbox 全选、单个选择

    自定义购物车二级checkbox全选与单个选择的实现，是提高用户体验和交互性的重要技术点。在这个场景中，通常会有一个顶层的全选checkbox，以及一系列代表商品的子checkbox，用户可以对单个商品进行选择，或者通过全选...

    asp.net gridview中用checkbox全选的几种实现的区别

    本文将详细介绍在*** GridView中使用CheckBox实现全选功能的几种不同方法，并分析它们之间的区别及效率问题。 首先，我们来了解几种常见的实现方式： 1. 自动列生成器方法： 这是最简单的实现方式。在GridView的...

    Jquery 实现checkbox全选方法

    在实际应用中，有时需要实现全选和全不选的功能，即用户可以选择或取消选择一组复选框中的所有项。 本文所介绍的方法是基于jQuery实现的，通过脚本对checkbox进行操作，实现全选和全不选的控制。它的核心思想是通过...

    jquery实现全选和全不选功能效果的实现代码【推荐】

    在Web开发中，全选和全不选功能是常见的一种用户交互形式，特别是在涉及多选列表或表格的情况下。在本篇文章中，将详细介绍如何使用jQuery来实现这一功能。 首先，文章标题中提到的“jquery实现全选和全不选功能...

    购物车的全选 结算 合计功能

    在前端，这个功能可以通过JavaScript或jQuery实现，监听复选框的点击事件，当用户勾选全选框时，遍历购物车列表中的每一个商品项，将其选中状态设置为与全选框一致。如果使用Vue、React等现代前端框架，可以利用数据...

    jgrid翻页全选记忆勾选

    5. **全选勾选所有页面**：这是一种高级功能，允许用户一次性选中所有页面的数据。这可能通过一个全局的全选按钮实现，点击后，无论在哪一页，所有数据显示的行都会被选中。 6. **不是当前页面**：这个描述可能指的...

    购物车全选

    1. 前端实现：前端通常使用JavaScript或者现代的前端框架如Vue.js、React.js等来处理这一功能。通过监听全选按钮的点击事件，触发一个函数，该函数遍历所有商品项的复选框元素，改变它们的选中状态。同时更新UI，...

    字符串的截取和全选并删除 讲解及代码

    通过上述示例代码，我们可以看到字符串的截取以及全选并删除功能的具体实现方式。这些功能不仅可以提升用户的使用体验，还能简化页面的设计，使整个系统更加高效易用。开发者可以根据实际情况调整代码细节，以适应...

    购物车全选，删除

    购物车全选功能通常通过一个复选框或者按钮来实现。当用户点击这个全选按钮，系统会自动勾选页面上显示的所有商品，表示用户希望对这些商品执行相同的操作。这种设计遵循了用户界面的易用性和一致性原则，让用户能够...

    checkbox 全选反选

    例如，在一个表格或者列表中选择多个项目时，常常需要实现全选、全不选以及反选的功能。这些功能的实现不仅能够提高用户体验，还能够简化前端与后端的数据交互流程。 #### 使用jQuery实现Checkbox全选和反选 在本...

    两种不同的方法实现js对checkbox进行全选和反选

    在使用JavaScript操作网页中的复选框...无论采用哪种方法，实现全选与反选功能的核心都是通过JavaScript操作DOM元素的`checked`属性。通过掌握这一知识点，我们可以轻松地在实际开发中根据需求选择合适的实现方式。

    详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案

    之所以不是采用链接形式直接跳转到AppStore对应应用是为了通过用户的主动输入关键词搜索给推广的企业App增加权重。所以这一个“复制”功能对用户的体验至关重要。 尝试了一些做法，在安卓/iOS平台上的兼容性都不是很...

    vue.js实现的全选与全不选功能示例【基于elementui】

    本文将详细解释如何使用Vue.js结合Element UI来实现全选与全不选的功能。我们将从几个方面来展开知识点： 1. Vue.js基础与Element UI组件 2. 页面渲染与数据初始化 3. 实现全选与全不选功能的函数 ### Vue.js基础...

    Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行

    总之，Gridview控件的CheckBox全选与单选功能，结合JavaScript实现的高亮显示行效果，是一种常见但非常有用的网页开发技术。它不仅可以让用户更直观地看到他们的操作结果，也提高了整个应用的互动性和用户体验。...

    JQuery复选框全选效果如何实现

    JQuery是JavaScript的一种快速、简洁、功能丰富的前端脚本库。它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互。本文重点介绍了如何利用JQuery实现复选框的全选效果。 全选功能在网页表格操作中非常常见，...

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