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

复选框全部选中(取消选中)

jQueryJavaScriptCSSHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
    <!-- 样式 -->
    <style type='text/css'>
        #container{}{
            text-align:center;
            padding:50px;
        }
        #container table{}{
            width:500px;
        }
        .center{}{
            text-align:center;
        }
        .td1{}{
            width:100px;
            text-align:left;
            padding-left:30px;
        }
    
    </style>

    <!-- javascript -->
    <SCRIPT LANGUAGE="JavaScript" src='js/jquery-1.2.6.js'></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        // 方法一：用jQuery
        function selectAll_jQuery(obj){
            if(obj.checked == true){
                $.each($('input:checkbox[name="cb"]').get(),function(index,obj){
                    obj.checked  = true;
                });

            }else{
                $.each($('input:checkbox[name="cb"]').get(),function(index,obj){
                    obj.checked  = false;
                });
            }
        }
        
        // 方法二：自己写
        function forEach(obj,fn){
            // fn 必须是 function
            if(typeof(fn) != 'function') return;
            // obj.length 存在并且obj.length > 0
            if(obj.length){
                // 对数组(或具有length的类数组)里的每一项执行 fn
                for(var i = 0,len = obj.length; i < len; i++){
                    // 第一个参数是索引，第二个参数是值
                    fn(i,obj[i]);
                }
            }
            // obj.length 不存在
            if(typeof(obj.length) == 'undefined'){
                fn(0,obj);
            }
        }
        function selectAll(obj){
            // 数组存放要选中(或取消选中)的复选框
            var arrCb = new Array(),
            // 所有的input
            allInput = document.getElementsByTagName('input');
            // 筛选出我们想要的复选框
            forEach(allInput,function(i,value){
                // type = 'checkbox' 且 name = 'cb'
                if(value.type.toLowerCase() == 'checkbox' && value.name == 'cb')
                    // 存入arrCb中
                    arrCb.push(value);
            }); 
            // 全选
            if(obj.checked == true){
                // 选中每个复选框
                forEach(arrCb,function(index,value){
                    value.checked  = true;
                });
            }else{ // 全不选
                // 取消选中每个复选框
                forEach(arrCb,function(index,value){
                    value.checked  = false;
                });
            }
        }
    //-->
    </SCRIPT>

 </HEAD>

 <BODY>
    <div id='container'>
      <table border=1 id='table1'>
        <tr>
            <th class='td1'><input type=checkbox id='selectAll' onclick='selectAll(this)'><label for='selectAll'>全选</label></th>
            <th>text</th>
        </tr>
        
        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>11111</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>22222</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>33333</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>44444</td>
        </tr>

      </table>

    </div>
 </BODY>
</HTML>
 
分享到：
| csdn文章内容显示与折叠
评论
发表评论

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

相关推荐

    TreeControl复选框：选中某个节点的复选框后，自动选中子节点的复选框

    以上就是关于“TreeControl复选框：选中某个节点的复选框后，自动选中子节点的复选框”这一功能的技术实现和涉及的关键知识点。在实际开发中，开发者需要结合具体的编程环境，如C#、Java、Python等，以及相应的库或...

    解决Extjs当中复选框全选后，取消选中某一项，全选框仍是选中状态的问题

    然而，在实际应用中，我们可能会遇到一个问题：当实现全选功能后，如果尝试取消选中其中的一项，全选复选框仍然保持选中状态，这显然不符合用户的预期。本文将深入探讨这个问题，并提供解决方案。 首先，我们需要...

    CheckBox分级选中 复选框 上下级 联动

    此外，为了优化用户体验，我们还可以添加一些辅助功能，比如禁用父级复选框的选中状态，直到所有子级复选框的状态都已知，或者在选中/取消选中父级复选框时，提供批量操作的动画效果。 在实际项目中，我们可能会...

    jquery判断复选框是否被全部选中，达到全选的目的

    标题提到的“jquery判断复选框是否被全部选中，达到全选的目的”，就是针对这一需求的具体实现。下面我们将详细探讨如何利用jQuery来完成这个功能。 首先，我们需要理解jQuery库的基本用法。jQuery是一个广泛使用的...

    jquery实现 复选框 选中和不选中 美化复选框

    在网页设计中，复选框（Checkbox）是用户界面中常用的一种元素，它允许用户对多个选项进行选择或取消选择。然而，原生的HTML复选框在样式上可能较为简单，无法满足现代网页设计美观的需求。jQuery作为一个强大的...

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

    通过以上代码，我们可以看到当点击 “全选/取消全选” 复选框时，页面上的其他复选框都会相应地被选中或取消选中。 #### 5. 总结 通过本篇文章的学习，我们了解了如何使用 JavaScript 实现复选框的全选与取消全选...

    js 实现选一个复选框 可以实现其他很多复选框同时选中

    1. **主复选框控制多个子复选框**：当用户勾选或取消勾选主复选框时，页面上所有其他的复选框都会跟随其状态变化。 2. **显示隐藏文本框**：每个子复选框旁边都有一个文本框，只有当对应的子复选框被选中时，这个...

    jQuery如何判断checkbox（复选框）是否被选中

    在探讨如何使用jQuery判断复选框(checkbox)是否被选中的过程中，我们首先需要理解复选框的基本属性以及jQuery操作DOM元素的方式。复选框在HTML中被定义为`&lt;input type="checkbox"&gt;`，当它被选中时，其`checked`属性...

    jQuery多级复选框checkbox选中代码

    基本的复选框选中和取消选中的jQuery代码如下： ```javascript $('input[type="checkbox"]').click(function() { $(this).prop('checked', !$(this).is(':checked')); }); ``` 这段代码监听了所有类型为"checkbox...

    选中一级复选框，相关二级或父级同时被选，取消也是

    4. **处理父级复选框**：使用`$(this).parents('li')`向上查找所有的祖先元素，直到根节点，然后再次遍历这些元素，检查它们的子复选框状态，以决定是否应该选中或取消选中父级复选框。 5. **状态同步**：在处理...

    WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件。其效果如下图： 这个控件是由一个复选框（CheckBox）与一个 ListView 组合而成。它的操作逻辑： 当选中“全选”时，列表中所有的项目都会被选中；反之，取消选中...

    判断复选框的选择状态

    反之，如果发现有一个或多个子复选框未被选中，全选复选框应该取消选中。 在JavaScript中，这可以通过事件监听和DOM操作来实现。例如，你可以使用`addEventListener('change', function() {...})`来监听复选框的...

    javascript复选框实现批量选择

    取消选中全部复选框： ``` function discheckallbox() { var boxarray = document.getElementsByName("box"); for(var i = 0; i ; i++) { boxarray[i].checked = false; } } ``` 点击某个复选框，如果所有复选框...

    jquery特效制作复选框,全选,反选,取消,购物车，统计价格，统计

    在这个项目中，我们关注的是使用jQuery来实现一些特定的功能，这些功能包括复选框的操作（全选、反选、取消选择）以及购物车中的商品价格统计。 首先，让我们深入了解一下复选框的操作。在HTML中，复选框是通过`...

    复选框（高级版，可以同时选中多个页面的复选框）

    - **`selectOneAddValue()`** 和 **`selectOneReduceValue()`** 分别处理单个复选框被选中和取消选中的情况。 - **`selectAllAddValue()`** 和 **`selectAllReduceValue()`** 则处理所有复选框被选中和取消选中的...

    Qt之QTableView添加复选框

    在`paint`方法中，使用`QPainter`对象来绘制复选框，注意根据当前项的状态（选中或未选中）来决定复选框的样式。 2. **设置表头复选框**： 对于表头，我们需要重写QHeaderView的`paintSection`方法，因为表头的...

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

    在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...

    unity-复选框，单选框

    在创建交互式游戏或应用时，复选框和单选框是不可或缺的元素，它们允许用户进行选择并提供反馈。本文将深入探讨Unity中的复选框和单选框，并提供实现这些功能的关键知识点。 一、Unity UI系统概述 Unity的UGUI是在...

    QTableWidget表头添加复选框实现全选功能

    有时候，我们希望在表格的表头中添加复选框，以便实现全选或取消全选的功能，这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先，我们需要了解`...

    CSS3 SVG点击复选框勾选动画特效

    此外，CSS3的`transition`属性可以用来平滑地过渡复选框在选中和未选中状态间的样式变化，例如改变背景色、边框宽度等。如果希望创建更复杂的动画，可以使用`@keyframes`规则定义动画的关键帧，然后应用到复选框或者...

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