`

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

JavaScriptHTML 
阅读更多
通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：
1、  当前页面中所有的CHECKBOX全部选中 及取消 。
2、  当前页面中所有同名的CHECKBOX全部选中。
3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。
这里以实例的形式，展示了三种情况的操作，完整源代码如下：
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全选示例</title>
</head>

<body>
<form action="" method="post" name="loginForm">
/********************全选示例********************/<br>
<b>水果（checkbox同名）：</b><br>
<input type="checkbox" name="fruit" value="1">苹果<br>
<input type="checkbox" name="fruit" value="2">梨<br>
<input type="checkbox" name="fruit" value="3">桃<br>
<input type=button value="全选水果" onclick="checkAllFruit()">
<input type=button value="取消全选水果" onclick="unCheckAllFruit()"><br>

<b>蔬菜：</b><br>
<input type="checkbox" name="vegetable" value="4">大白菜<br>
<input type="checkbox" name="vegetable" value="5">西红柿<br>

<b>水果2（checkbox不同名，具有相同的前缀名）：</b><br>
<input type="checkbox" name="_fruit1" value="6">苹果<br>
<input type="checkbox" name="_fruit2" value="7">梨<br>
<input type="checkbox" name="_fruit3" value="8">桃<br>
<input type=button value="全选水果2" onclick="checkAllFruit2()">
<input type=button value="取消全选水果2" onclick="unCheckAllFruit2()"><br>

<input type="checkbox" name="vegetable" onclick="doChangeCheckStatus(this);">全选
<input type=button value="所有全选" onclick="checkAll()">
<input type=button value="取消所有全选" onclick="unCheckAll()">

</form>
</body>
</html>
<Script language="JavaScript">...
function checkAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
                 objs[i].checked = true;

      }        

}
function checkAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")            
                    objs[i].checked = true;

      }        

}
function checkAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
            ...{                
                    objs[i].checked = true;
            }
            
      }        

}
function unCheckAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )            
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
                    objs[i].checked = false;

      }        

}
function doChangeCheckStatus(obj)
...{
    if(obj.checked==true)
    ...{
        checkAll();
    }
    else
    ...{
        unCheckAll();
    }
}

</script>

分享到：
| 几种分页查询的实现与比较
评论
发表评论

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

相关推荐

    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实现全选和全不选功能效果的实现代码【推荐】

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

    Jquery 实现checkbox全选方法

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

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

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

    jgrid翻页全选记忆勾选

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

    购物车全选

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

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

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

    购物车全选，删除

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

    checkbox 全选反选

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

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

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

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

    最近需要给HTML5的WebAPP在页面上实现一个...在微信浏览器内是很容易实现长按文本激发系统菜单，高亮全选文本内容的。但是在其他浏览器的表现就不是很一致了。包括模拟focus input，JavaScript Selection, 使用a标签尝

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

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

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

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

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

    此外，文中还提到了其他两种获取复选框的方法，这两种方法采用了JQuery选择器的层级关系： - 第二种方法是通过指定层级关系来精确获取表格中的所有复选框：$("tbody&gt;tr&gt;td&gt;input").prop("checked", this.checked); -...

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