`
flashdream8
  • 浏览: 675464 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS全选checkBox最佳方案

阅读更多
input type="button" name="" value="不计算长度" onclick="a()">
 <input type="button" name="" value="全选" onclick="b()">
 <input type="button" value="缓存"  onclick="c()">
  <input type="checkbox" name="test[]" value="0"> 测试测试<br>
   <script language="JavaScript">
 <!--
    var ca = new Array();
    function a()
    {
        var m = document.getElementsByName('test[]');
        for ( var i=0; i< m.length ; i++ )
        {
            m[i].checked == true
                ? m[i].checked = false
                : m[i].checked = true;
        }
    }

    function b()
    {
        var m = document.getElementsByName('test[]');
        var l = m.length;
        for ( var i=0; i< l; i++)
        {
            m[i].checked == true 
                ? m[i].checked = false
                : m[i].checked = true;
        }
    }

    function c()
    {
        if (ca.length == 0)
        {
            ca = cache();
        }
        cl = ca.length;
        for ( var i=0; i< cl; i++)
        {
            ca[i].checked == true 
                ? ca[i].checked = false
                : ca[i].checked = true;
        }
    }

    function cache()
    {
        var m = document.getElementsByName('test[]');
        var cache = new Array();
        var l = m.length;
        for ( var i=0; i< l; i++)
        {
            cache[i] = m[i];
        }
        return cache;
    }

 //-->
 </script>

 

 

       至于那个input type="checkbox"的,你们就尽量复制吧,尽量不要超过1W,否则。。别怪我没有提醒你,当然了,也不需要把浏览器关掉,跑到外面抽根烟再回来就行了。

     所以,我们要切实的记住,反正数组有长度的,坚决不能放在循环里面,而是先将这个长度取出来当成变量。PHP里也一样,循环数组的时候,先count数组的长度比较好。
       当然了,我第三个采用了缓存,速度也是非常快的,比长度取好后再进行计算更快,因为连一次都不用取了(当然,除了第一次),全部扔给客户端了。

     上面的例子还是比较方便的,因为,checkbox的 name值都一样,如果不一样怎么办???
只能这样

 

script language="JavaScript">
 <!--
    function check()
    {
        var inputs = document.getElementsByTagName('input');
        var inputsLen = inputs.length;
        for (var i = 0; i < inputsLen ; i++ )
        {
            if (inputs[i].type.toLowerCase() == 'checkbox')
            {
                inputs[i].checked == true 
                    ? inputs[i].checked = false
                    : inputs[i].checked = true;
            }
        }
    }
 //-->
 </script>

 

 

缓存方法同上,这里就不多讨论了

<转自:http://www.cnitblog.com/neatstudio/archive/2007/10/17/35006.html>

分享到:
评论

相关推荐

    Vue.js实现购物车checkbox的全选与反选

    `updateSelectedItem`方法会在单个商品的checkbox状态改变时调用,它通过`every`方法检查所有商品是否都被选中,从而更新全选状态。 最后,确保在项目中正确安装并引入Vue.js,如果有其他依赖如Vuex或Axios,需要...

    js 全选或全不选js 全选或全不选

    ### JS 实现全选与全不选功能 在前端开发中,经常需要处理表单的选择操作,例如在购物车页面中实现商品的全选或全不选功能。本篇文章将详细解析如何通过JavaScript来实现这一功能,并对提供的代码进行深入分析。 #...

    全选js.txt

    根据提供的文件信息,我们可以分析出该文件主要涉及的是JavaScript中实现对页面内所有复选框进行全选、反选及取消选择的功能。接下来,我们将详细解释这些功能的实现原理及代码逻辑。 ### 1. 全选功能实现 在文件...

    一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    &lt;input type="checkbox" id="selectAll"&gt; 全选 &lt;input type="checkbox" class="childCheckbox" name="option1"&gt; 选项1 &lt;input type="checkbox" class="childCheckbox" name="option2"&gt; 选项2 &lt;input type="...

    小测试:jquery的全选插件

    标题中的“小测试:jquery的全选插件”暗示了我们即将探讨的是一个基于jQuery的全选功能实现,这在Web开发中非常常见,尤其...同时,分析源码也是提升编程能力的好方法,有助于我们了解优秀代码的设计模式和最佳实践。

    如何为CheckBoxList和RadioButtonList添加滚动条

    首先,要在CheckBoxList和RadioButtonList控件上添加滚动条,我们需要继承控件的基类,添加自定义的滚动条控制属性,然后重写控件的Render方法来实现滚动条的展示。 具体步骤如下: 1. 创建自定义控件类,继承自...

    JS实现“全选”和"全不选"功能代码实例

    在JavaScript(JS)中,实现“全选”和“全不选”的功能是常见的前端交互需求,尤其是在有多个复选框(checkbox)的场景中。这个功能允许用户一键选择或取消选择所有选项,大大提高了用户体验。下面我们将详细讨论...

    解决JQuery全选/反选第二次失效的问题

    原生JavaScript的`getElementsByName`方法可以获取所有具有指定名称的元素,然后通过循环遍历这些元素,设置它们的`checked`属性为`true`或`false`,从而实现了全选/反选的功能。这种方法不受jQuery版本限制,成功...

    jquery_checkgroup.js

    `jquery_checkgroup.js`提供了丰富的配置参数,如`toggleButton`用于设置全选/反选按钮,`selectAllText`和`deselectAllText`分别定义全选和全不选的按钮文本,以及`allowIndeterminate`是否允许部分选中的状态。...

    jQuery判断checkbox选中状态

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本篇文章中,我们将探讨...在实际项目中,开发者通常会结合使用jQuery和原生JavaScript,以达到最佳的灵活性和性能。

    jquery 实现复选框的全选操作实例代码

    在Web开发中,复选框是一种常用的表单控件,它允许用户选择多个选项。当处理大量的复选框时,为了提高用户体验,经常需要实现全选...开发者需要根据实际应用场景灵活运用上述知识点,以达到最佳的用户体验和性能表现。

    使用jQuery获取radio/checkbox组的值的代码收集

    对于全选和取消全选,分别使用了attr()和removeAttr()方法来操作checked属性。如下所示: ```javascript $("#btn1").click(function(){ $("[name='checkbox']").attr("checked", 'true'); // 全选 }); $("#btn2")...

    checkbox 树

    在前端开发中,JavaScript库如jQuery、React或Vue.js等提供了构建复选框树的便利工具。例如,使用React,我们可以创建一个组件,该组件接收树形数据作为props,然后递归渲染节点。每个节点包含一个复选框组件和一个...

    jquery实现带复选框的gridview

    当你需要在GridView中集成复选框功能时,jQuery可以提供高效且灵活的解决方案。 本示例"jquery实现带复选框的gridview"提供了一个完整的项目文件,允许开发者自定义数据源,以实现一个简单易用的复选框Gridview功能...

    jQuery code

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本文中,我们将深入探讨jQuery的核心概念、主要功能及其在实际开发中的应用。 1. **jQuery核心概念*...

    jquery获取复选框被选中的值

    - **取消全选**:通过`$("[name='checkbox']").removeAttr("checked")`移除checked属性,从而取消全选。 - **选中所有奇数索引的复选框**:通过`:even`选择器,我们可以选中索引为偶数的复选框(在0开始的索引中,...

    选择城市组件(多选)

    1. **前端框架**:组件可能基于React、Vue.js、Angular等流行的前端框架构建,利用它们的生命周期方法、状态管理机制和组件化特性。 2. **数据结构**:城市数据可能存储为JSON对象或数组,包括城市ID、名称、父级...

Global site tag (gtag.js) - Google Analytics