`

JS基础学习篇----JS控制checkbox全选、取消全选、删除功能

阅读更多
前面讨论了JS控制checkbox,及对document.all,document.getElementById,document.getElementsByTagName,document.getElementsByName等做了学习,
链接如下:
http://blog.csdn.net/luweifeng1983/archive/2008/12/16/3532529.aspx
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3549769.aspx
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3550665.aspx
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3551096.aspx
今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。
看下面两种实现方法:

  1. 方法一:
  2. functioncheckAll()
  3. {
  4. varcode_Values=document.all['code_Value'];
  5. if(code_Values.length){
  6. for(vari=0;i<code_Values.length;i++)
  7. {
  8. code_Values[i].checked=true;
  9. }
  10. }else{
  11. code_Values.checked=true;
  12. }
  13. }
  14. functionuncheckAll()
  15. {
  16. varcode_Values=document.all['code_Value'];
  17. if(code_Values.length){
  18. for(vari=0;i<code_Values.length;i++)
  19. {
  20. code_Values[i].checked=false;
  21. }
  22. }else{
  23. code_Values.checked=false;
  24. }
  25. }
  26. functionmultipleDelete()
  27. {
  28. varnum=0;
  29. varcode_Values=document.all['code_Value'];
  30. if(code_Values.length){
  31. for(vari=0;i<code_Values.length;i++)
  32. {
  33. if(code_Values[i].checked==true)
  34. {
  35. num++;
  36. }
  37. }
  38. }else{
  39. if(code_Values.checked==true){
  40. num++;
  41. }
  42. }
  43. if(num==0){
  44. alert('Pleaseselectdeleteitem');
  45. }
  46. if(num>0){
  47. document.BuCodeSearch.action='<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>';
  48. document.BuCodeSearch.submit();
  49. }
  50. }
  51. </script>
  52. 方法二:
  53. functioncheckAll()
  54. {
  55. varcode_Values=document.getElementsByTagName("input");
  56. for(i=0;i<code_Values.length;i++){
  57. if(code_Values[i].type=="checkbox")
  58. {
  59. code_Values[i].checked=true;
  60. }
  61. }
  62. }
  63. functionuncheckAll()
  64. {
  65. varcode_Values=document.getElementsByTagName("input");
  66. for(i=0;i<code_Values.length;i++){
  67. if(code_Values[i].type=="checkbox")
  68. {
  69. code_Values[i].checked=false;
  70. }
  71. }
  72. }
  73. functionmultipleDelete()
  74. {
  75. if(document.BuCodeSearch.elements["code_Value"])
  76. {
  77. varnum=0;
  78. varfm=document.BuCodeSearch;
  79. if(document.BuCodeSearch.elements["code_Value"])
  80. {
  81. varelm=document.BuCodeSearch.elements["code_Value"];
  82. varename="code_Value";
  83. if(elm.length){
  84. varlen=fm.elements[ename].length;
  85. for(vari=0;i<len;i++){
  86. vare=fm.elements[ename][i];
  87. if(e.checked==true){
  88. num++;
  89. }
  90. }
  91. }else{
  92. if(elm.checked==true){
  93. num++;
  94. }
  95. }
  96. if(num>0)
  97. {
  98. document.BuCodeSearch.action='<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>';
  99. document.BuCodeSearch.submit();
  100. }
  101. }
  102. }
  103. }
code_Value为checkbox表单的名称,BuCodeSearch为form名称
  1. <tdalign="left"width="20"><inputtype="checkbox"name="code_Value"value="<%=userDefFieldValueBean.getUdfValue()%>"></td>

分享到:
评论

相关推荐

    Checkbox全选问题

    HtML javascritp checkbox 全选HtML javascritp checkbox 全选

    checkbox的全选与取消

    全选和取消功能通常用于表格或者列表中,让用户能够便捷地操作大量选项。 首先,我们来看看复选框的基本结构。在HTML中,复选框通过`&lt;input&gt;`标签来创建,类型设置为"checkbox": ```html &lt;input type="checkbox" ...

    今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。。。。

    ### JS控制Checkbox全选、取消全选与删除功能 在前端开发中,处理表单数据时经常需要用到对多个复选框(checkbox)的操作,比如全选、取消全选以及基于选择状态进行某些操作(如删除)。本文将详细介绍如何通过...

    CheckBox全选并删除

    在ASP.NET开发中,CheckBox控件常常用于实现用户界面中的多选功能,而"CheckBox全选并删除"这个主题涉及到两个关键操作:全选和删除。全选功能允许用户一次性选择多个选项,删除则通常指的是从数据库或其他数据存储...

    Recyclerview item上CheckBox,包括全选,取消全选,单选功能

    本文将深入探讨如何在RecyclerView的item上添加CheckBox,并实现全选、取消全选以及单选功能。 首先,我们需要创建一个自定义的RecyclerView Adapter。Adapter是连接数据源与RecyclerView的关键,它负责将数据转化...

    checkBox全选——jscheckBox全选——jscheckBox全选——js

    这个标题和描述虽然重复,但明显是在强调使用JS实现`checkBox`的全选功能。下面我们将详细探讨如何利用JavaScript来实现这一功能。 首先,HTML部分,我们需要定义一组`checkBox`,并添加一个特殊的`checkBox`作为...

    WPF之CheckBox组的全选设计

    通过以上步骤,我们可以实现一个功能完善的WPF CheckBox全选设计。理解并熟练运用位运算和Flags特性,对于开发高效且易于维护的WPF应用至关重要。在实际项目中,可能还需要考虑其他因素,如性能优化、异常处理和用户...

    winform DataGridView表头带CheckBox全选

    在这个特定的场景中,我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`,以便实现全选和全不选的功能。这将大大提升用户体验,使得用户可以快速地对所有行进行操作,如批量删除、更新等。 首先,我们需要...

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

    "js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求,即通过JavaScript控制HTML中的复选框(checkboxes),实现全选、反选和取消全部选中的功能。在本文中,我们将深入探讨如何...

    js实现checkbox 全选和取消

    js实现checkbox 全选和取消 自己亲测可以使用

    JQuery实现checkbox的全选取消全选

    在IT领域,特别是前端开发中,使用jQuery来操作DOM元素是一种常见的实践,特别是在处理复选框(checkbox)的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能,通过分析给定代码片段,提炼出关键...

    简约时尚CSS样式,checkbox 全选或取消全选、或得到选中个数全案例使用详解

    "Table简约时尚CSS样式,checkbox全选或取消全选、或得到选中个数全案例使用详解(百度、CSDN、ITEye).html"是一个实际的示例文件,它包含完整的HTML和CSS代码,可能还包含了JavaScript实现。这个案例演示了如何将...

    JS控制选择框全选取消全选

    本文将详细解析如何利用JS控制选择框(通常为复选框)的全选与取消全选功能,以及在此基础上实现批量操作。 ### 核心知识点:JS控制选择框全选/取消全选 #### 1. HTML结构定义 在HTML文档中,选择框(复选框)由`...

    常用的js全选checkbox按钮的功能

    在JavaScript(JS)中,全选复选框(checkbox)是一项常见的功能,它允许用户一键选择页面上所有的可选项。这个功能广泛应用于数据表格、表单以及任何包含多个选择的界面中,提升用户体验,简化操作流程。在本篇讨论...

    element-ui CheckBox全选.txt

    vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框...通过本篇文章的学习,我们了解了如何使用 JavaScript 实现复选框的全选与取消全选功能。这种功能在很多场景下都非常实用,如购物车、表格选择等。掌握这一技能有助于提高前端开发的能力。

    checkbox实现全选和反选经典例子

    在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

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

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

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

    在微信小程序中,实现多选框(Checkbox)的全选与取消全选功能是一项常见的需求,主要用于批量操作或数据筛选。下面将详细讲解如何通过JavaScript(JS)、WXML(微信小程序的XML标记语言)和WXSS(微信小程序的CSS...

Global site tag (gtag.js) - Google Analytics