`
jackroomage
  • 浏览: 1215026 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

jquery 1.9版本下复选框 全选 及 取值操作

 
阅读更多

<!DOCTYPE Html>
<html>
    <head>
        <script type="text/javascript" src="c:/jquery.js"></script>
        <script type="text/javascript">
            function selectAll(checkbox) {
               //1、 1.9以前的方法
               // $('input[type=checkbox]').prop('checked', $(checkbox).prop('checked'));
               //2.以下代码,官方代码 
                  $("input[name='chk_list']").prop("checked", function(i, val) { 
                        return !val; 
                  }); 
              }
                
             $(function(){     
                   $("input[type=checkbox]").click(function(){
                      var str = "";
                      $("input:checkbox:checked").each(function() {
                         str+=$(this).val();
                       });
                      //alert(str);
                       $("#inputCheckboxId").val(str);
                   });
             });
        </script>
    </head>
    <body>
        <input type="checkbox" onclick="selectAll(this);" value=""/>全选<br/>
        <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
        <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
        <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
        <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
        <input id="inputCheckboxId" /><br />
    </body>
</html>

分享到:
评论

相关推荐

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

    在实际应用中,我们经常需要在列头添加复选框来实现全选或全不选的功能,以便于用户对大量数据进行操作。本篇将深入探讨如何利用SpreadJS实现这一功能,并结合提供的压缩包文件进行解析。 首先,我们关注的是"demo....

    jquery复选框全选操作

    在本示例中,我们将聚焦于jQuery实现复选框的全选与反选功能,这对于创建数据筛选或批量操作的用户界面非常有用。下面将详细介绍这个功能的实现方式。 首先,我们需要在HTML页面中设置一组复选框,通常我们会为这些...

    jquery 复选框 全选,全不选

    这个例子展示了如何利用jQuery的事件处理和DOM操作来实现复选框的全选全不选功能。在实际应用中,你可以根据需要对这个基础框架进行扩展,例如增加对分组复选框的支持,或者添加更复杂的逻辑判断。在HTML和jQuery的...

    DataGridView 复选框全选。

    在这个场景下,我们将关注如何在`DataGridView`中实现复选框列的全选功能。这涉及到用户交互的增强,以及对事件响应的编程。 首先,我们需要在`DataGridView`中添加一个复选框列。这可以通过在设计时手动添加,或在...

    Axure RP 复选框全选、反选

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

    javascript复选框全选

    javascript 复选框全选,复选框全选,复选框全选

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

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

    js 实现 复选框全选(二)

    js 实现 复选框全选(二)! 值得下载看看!资源免费,大家分享!!

    复选框全选全不选JS代码

    给定的代码片段是一个名为`getAllCheckBox`的JavaScript函数,其作用是对页面上的所有复选框执行全选或全不选操作。具体来说: 1. **获取所有输入元素**:通过`document.getElementsByTagName("input")`获取页面上...

    js控制复选框全选、全不选

    在JavaScript编程中,"js控制复选框全选、全不选"是一个常见的需求,尤其在数据表或者选项列表中,用户可能希望一次性选中或取消所有复选框。这个功能可以通过编写简单的JavaScript代码实现。这里我们将深入探讨如何...

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

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

    Pyqt5 QTableWidget/QTableView 行表头添加复选框全选功能

    本篇文章将详细探讨如何在`QTableWidget`或`QTableView`的表头中添加复选框,并实现全选/全不选的功能。 首先,我们需要了解`QTableWidgetItem`和`QHeaderView`。`QTableWidgetItem`是`QTableWidget`中的基本元素,...

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

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

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

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

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

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

    jquery实现复选框全选和反选

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

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

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

    DataGridView行标题加复选框实现全选

    在实际应用中,为了提高用户体验,我们经常需要在`DataGridView`的行标题中添加复选框,以便用户可以方便地进行全选或反选操作。标题中的复选框全选功能无需额外的按钮触发,使得界面更加简洁高效。 本文将详细介绍...

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

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

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

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

Global site tag (gtag.js) - Google Analytics