0 0

JSP复选框全选和反选……5

我的复选框是以循环来做的,所有每个复选框上面的NAME都是一样的,现在我要实现全选和反选该怎么做,如果按一般的方法做结果是只能选中一个复选框。。。。。
急求答案
问题补充:
谢谢各位大师回答,我需要再补充一个小问题:
   当全选 的时候把所有复选框的文本值放入到一个textarea中,去复选框的value放入到一个HIDDEN中;
   再全不选的时候清空textarea和hidden的value
    不知道是我JS写得有问题还是怎样,我只能加一个值进去,而且不加值我可以实现全选跟反选,但加了赋值的语句进去后就只能选一个了
2009年6月24日 13:53

4个答案 按时间排序 按投票排序

0 0

采纳的答案

<script language="javascript">
    function selectIt() {

        form = document.lzyy

        action = event.srcElement.name

        for (var i = 0; i < form.elements.length; i++) {

            if (form.elements[i].name == "checkbox") {

                e = form.elements[i]

                e.checked = (action == "selectAll") ? (form.selectAll.checked) : (!e.checked)
                ////在这里 通过条件表达式?:来使每个框反选。朋友们可以好好思考一下。这种首先是一种实现方式。其二 还能是代码简练。哈哈 反正个人是喜欢这种方式拉。
            }

        }

    }
</script>
<form name="lzyy">
    <p class="STYLE1">
        全 选
        <input type="checkbox" name="selectAll" value="checkbox" onClick="selectIt()">
        <br>
        反 选
        <input type="checkbox" name="invest" value="checkbox" onClick="selectIt()">
        <br>
        Item1
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item2
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item3
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item4
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item5
        <input type="checkbox" name="checkbox" value="checkbox">
    </p>
</form>



<html>
    
    <head>
        <script type="text/javascript">
            function checkEvent(name, allCheckId) {
                var allCk = document.getElementById(allCheckId);
                if (allCk.checked == true) checkAll(name);
                else checkAllNo(name);

            }

            //全选
            function checkAll(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++)
                    names[i].checked = true;

                }
            }

            //全不选
            function checkAllNo(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++)
                    names[i].checked = false;
                }
            }

            //反选
            function reserveCheck(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++) {
                        if (names[i].checked) names[i].checked = false;
                        else names[i].checked = true;

                    }
                }

            }
        </script>
    </head>
    
    <body>
        <input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />
        全选
        <input type="checkbox" id="ckReserve" onclick="reserveCheck('ck','ckReserve')"
        />
        反选
        <br />
        <input type="checkbox" name="ck" value="1" />
        篮球
        <br />
        <input type="checkbox" name="ck" value="2" />
        旅游
        <br />
        <input type="checkbox" name="ck" value="3" />
        读书
        <br />
        <input type="checkbox" name="ck" value="4" />
        美食
        <br />
        <input type="checkbox" name="ck" value="5" />
        睡觉
    </body>

</html>






// 说明:Javascript 控制 CheckBox 的全选与取消全选
function checkAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for (var i = 0; i < len; i++) {
        if ((el[i].type == "checkbox") && (el[i].name == name)) {
            el[i].checked = true;
        }
    }
}
function clearAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for (var i = 0; i < len; i++) {
        if ((el[i].type == "checkbox") && (el[i].name == name)) {
            el[i].checked = false;
        }

    }

}



var checkFlag = true;    
function ChooseAll() {
    if (checkFlag) {        
        var inputs = document.all.tags("INPUT");        
        for (var i = 0; i < inputs.length; i++) {          
            if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll") {
                inputs[i].checked = true;          
            }        
        }
        checkFlag = false;      
    } else {        
        var inputs = document.all.tags("INPUT");        
        for (var i = 0; i < inputs.length; i++) {          
            if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll") {
                inputs[i].checked = false;          
            }        
        }
        checkFlag = true;      
    }    
}



<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>

2009年6月24日 15:13
0 0

晕菜了.取值通过id.都给你这么多参考代码了.你就不能多想想么?

2009年6月25日 11:18
0 0

对啊,用document.getElementsByName("aa") 得到所有checkbox的集合。然后遍历,用js控制是否选中。估计楼主是没有用什么框架的了

2009年6月24日 14:53
0 0

把所有的复选框都得到,遍历第一个进行设置嘛,

如果用jquery的话,几行代码就搞定了

2009年6月24日 13:56

相关推荐

    Axure RP 复选框全选、反选

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

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

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

    复选框全选和反选.zip

    在IT领域,尤其是在前端开发中,复选框全选和反选是一个常见的功能需求,它通常出现在表格或者列表中,允许用户一次性选择或取消选择所有项目。这个"复选框全选和反选.zip"文件可能包含了一个JavaScript实现的解决...

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

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

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

    例如,React中有许多第三方库如`react-checkbox-tree`、`antd`的Tree组件等,它们内置了全选、反选和级联选择的功能。 总结来说,带复选框的多级目录树是一种高效的数据组织和操作方式,结合全选和反选功能,能极大...

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

    在上面的代码中,我们有一个全选复选框(`#selectAll`)和多个行内复选框(`.itemCheckbox`)。全选复选框用于控制所有行内复选框的状态。 接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来...

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

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

    jquery实现复选框全选和反选

    《锋利的jquery》利用jquery实现复选框的全选和反选

    VS08快捷键,Asp.net JS复选框全选,反选

    同时,在前端开发中,JavaScript的复选框操作是常见的交互功能,全选和反选功能则能提升用户体验。下面将详细介绍这两个方面。 ### VS2008 快捷键 在VS2008中,掌握快捷键能够帮助开发者快速执行常用操作,提高...

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

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

    react实现复选框全选和反选组件效果

    在React开发中,实现复选框全选和反选组件是一项常见的需求,这通常涉及到状态管理与事件处理。本文将详细解析如何使用React构建这样的功能。 首先,我们需要创建一个名为`List`的React组件,该组件包含一个复选框...

    jquery 、js实现复选框 (全选、反选)

    ### 使用jQuery和JavaScript实现复选框的全选与反选功能 在Web开发中,复选框(checkbox)是常用的一种交互元素,特别是在表格或列表中用于选择多个项目时非常实用。本文将详细介绍如何利用jQuery和原生JavaScript...

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

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

    spreadjs_列头添加复选框全选功能-demo.zip

    《SpreadJS:实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库,由 GrapeCity 公司开发,它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中,我们经常需要在列头添加复...

    复选框全选、全不选和反选的效果实现.rar

    本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript(JS)实现复选框的全选、全不选和反选功能,这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...

    axure复选框全选反选效果.rp

    axure复选框全选反选效果.rp

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

    ### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    JQ 复选框全选反选

    在网页中,复选框常常用于让用户多选选项,而全选和反选功能则提供了方便快捷的选择所有或取消所有选项的方式。 首先,我们需要了解jQuery选择器的基本用法。jQuery通过CSS选择器来定位DOM元素,如`$("#id")`用于...

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

    总之,理解和掌握复选框的全选和反选功能对于任何前端开发者来说都是至关重要的技能,尤其在需要处理大量用户交互和数据操作的场景下。通过熟练运用JavaScript,你可以创建更加高效、用户友好的网页应用。

Global site tag (gtag.js) - Google Analytics