`
浪淘猪
  • 浏览: 44887 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

列表 checkbox 的全选/取消全选 代码

 
阅读更多

 

jsp列表:

<tr>

<th width="2%" title="全选/取消全选"><input type="checkbox" name="selectAll" id="selectAll" style="cursor:hand" onclick="ck()"/></th>
    <th width="5%">具体表头字段</th>

                                。。。。。

</tr>

<s:iterator value="xxx" var="obj" status="stuts">

 <td><input type="checkbox" name="idArr" value="<s:property value="ID"/>"/> </td>
    <td><s:property value="xx"/></td>

          。。。。。。。

 </tr>
 </s:iterator>

 

触发函数:

 

function ck()
{
var ischeck = document.getElementById("selectAll").checked;
   if(ischeck) {
             checkallbox();         
           }else {
             discheckallbox();
            }
}

function checkallbox() {
     var boxarray = document.getElementsByName("idArr");
          for(var i = 0; i < boxarray.length; i++) {
                boxarray[i].checked = true; }             
                } 
               
function discheckallbox() {
      var boxarray = document.getElementsByName("idArr");
          for(var i = 0; i < boxarray.length; i++) {
                 boxarray[i].checked = false;
                } 
}

 

 下面这个触发函数的写法更简单一些:

 function ck()

{

    var chk = document.getElementById("selectAll");

if (chk.checked) {

sel(true);

} else {

sel(false);

}

}

function sel(b)

{

    var id_arr = document.getElementsByName("idArr");

    for (var i=0;i<id_arr.length ;i++ )

    {

        if(id_arr[i].type=="checkbox")

            id_arr[i].checked = b;

    }

}

分享到:
评论

相关推荐

    C# Winform DatagridView 分页及 全选/ 取消全选 功能

    在这个场景中,我们将关注两个特定的功能:分页和全选/取消全选。这些功能在处理大量数据时特别有用,能够提高用户界面的响应速度和用户体验。 首先,我们来详细讲解`DataGridView`的分页功能。在处理大量数据时,...

    checkbox全选/取消全选以及checkbox遍历jQuery实现代码

    "checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中,选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见,例如在多选题中,用户可以选择所有选项...

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

    &lt;input type="checkbox" name="checkbox2" onclick="selAllCheckbox()" id="checkbox2"/&gt; 全选/取消全选 &lt;br/&gt; &lt;input type="checkbox" name="item1" value="Item 1"/&gt; &lt;input type="checkbox" name="item2" ...

    flex datagrid checkbox 全选/反选

    ### Flex DataGrid Checkbox 全选/反选知识点详解 #### 一、概述 Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分,它提供了一个灵活的方式来展示数据列表,并且支持多种功能,如排序、分组、筛选等。在...

    AjaxPro实例集合实现技术: 无刷新 验证指定字符 验证数字 验证邮箱 无刷新下拉菜单三级联动 CheckBox全选/反选/删除 等等..

    实现技术: 无刷新 验证指定字符 验证数字 验证邮箱 无刷新下拉菜单三级联动 CheckBox全选/反选/删除 等等.. 程序收集了本人在ASP.NET开发应用中会经常用到的轻量级的AJAX小例子,程序里面很多地方做了注释,通俗易懂...

    vue+elementui实现下拉框增加checkbox并可全选或取消(完整案例及效果图).zip

    此外,为了实现全选/取消全选的功能,可以在`el-select`组件上添加一个`@change`事件监听器,当选择项发生变化时触发`toggleAllChecked`方法: ```html v-model="value" multiple placeholder="请选择" @...

    Checkbox全选问题

    HtML javascritp checkbox 全选HtML javascritp checkbox 全选

    简约时尚CSS样式,checkbox 全选或取消全选、或得到选中个数全案例使用详解

    "Table简约时尚CSS样式,checkbox全选或取消全选、或得到选中个数全案例使用详解(百度、CSDN、ITEye).html"是一个实际的示例文件,它包含完整的HTML和CSS代码,可能还包含了JavaScript实现。这个案例演示了如何将...

    flex在DataGrid中实现checkbox全选或取消

    在博文《flex在DataGrid中实现checkbox全选或取消》中,作者可能详细讲解了以下步骤: 1. 创建DataGrid,并绑定数据源。 2. 添加一个CheckBox组件,作为全选/取消全选的控制。 3. 实现CheckBox的change事件监听,...

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    实现CheckBox全选/全不选/反选代码如下: &lt;&#37;@ page language="java" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&...

    js实现checkbox 全选和取消

    js实现checkbox 全选和取消 自己亲测可以使用

    checkbox的全选与取消

    全选和取消功能通常用于表格或者列表中,让用户能够便捷地操作大量选项。 首先,我们来看看复选框的基本结构。在HTML中,复选框通过`&lt;input&gt;`标签来创建,类型设置为"checkbox": ```html &lt;input type="checkbox" ...

    jQuery checkbox全选/取消全选实现代码

    总结来说,本文档通过示例代码展示了如何使用jQuery实现复选框的全选/取消全选功能,并简单介绍了`.attr()`和`.each()`等jQuery方法的用法。通过这些方法,开发者可以更加轻松地处理页面上的DOM元素,并实现各种交互...

    Recyclerview item上CheckBox,包括全选,取消全选,单选功能

    本文将深入探讨如何在RecyclerView的item上添加CheckBox,并实现全选、取消全选以及单选功能。 首先,我们需要创建一个自定义的RecyclerView Adapter。Adapter是连接数据源与RecyclerView的关键,它负责将数据转化...

    DevExpress 实现checkbox全选效果.rar

    在提供的RAR文件"DevExpress 实现checkbox全选效果"中,可能包含了实现这个功能的代码示例。这些示例代码可能包含了窗体设计、控件初始化、事件处理函数等内容,通过阅读和理解这些代码,你可以学习到如何在...

    winform DataGridView表头带CheckBox全选

    通过以上步骤,我们就成功地在`Winform DataGridView`的表头添加了一个`CheckBox`,实现了全选/全不选的功能。这样的设计使得用户可以便捷地对大量数据进行操作,提高了应用的实用性。在实际项目中,可能还需要考虑...

    DataGridView标头CheckBox全选反选

    通过以上步骤,我们可以实现`DataGridView`的全选/反选功能,使得用户可以通过列头的`CheckBox`轻松选择所有行或者取消选择。这样的设计提高了用户体验,特别是在处理大量数据时,使得批量操作更加便捷。同时,这个...

    listview带checkbox全选、取消功能精简版

    它可能包含了上述逻辑的完整代码,包括Adapter的实现、全选/取消全选逻辑以及对ListView的操作。 总的来说,"listview带checkbox全选、取消功能精简版"是一个教你如何在Android应用中实现ListView与Checkbox交互的...

    JTable添加CheckBox

    通过上述代码,我们可以创建一个包含`CheckBox`的`JTable`,并且表头的`JCheckBox`可以实现全选/全不选的功能。这种功能在很多数据操作应用中都非常实用,例如在邮件客户端、任务管理器或者文件管理器中选择多项进行...

Global site tag (gtag.js) - Google Analytics