列表全选与全反选

<!DOCTYPE html>
<html>
    <head>
        <title>用户管理</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <style>
        </style>
        <script>
            //全选、全反选
            function doSelectAll(){
                $("input[name=selectedRow]").prop("checked",$("#selAll").is(":checked"));
            }
    </script>
    </head>
    <body>

<form name="form1" action="" method="post" enctype="multipart/form-data">
        <div class="t_list" style="margin:0px;border:0px none;">
            <table width="100%" border="0">
                <tr class="t_tit">
                    <td width="30" align="center"><input type="checkbox" id="selAll" onclick="doSelectAll()" /></td>
                    <td width="140" align="center">用户名</td>
                    <td width="140" align="center">账号</td>
                    <td width="160" align="center">所属部门</td>
                    <td width="80" align="center">性别</td>
                    <td align="center">电子邮箱</td>
                    <td width="100" align="center">操作</td>
                </tr>
                <!--循环显示用户列表-->
                <tr bgcolor="f8f8f8">
                    <td align="center"><input type="checkbox" name="selectedRow" value="" /></td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">
                        <a href="javascript:doEdit(id)">编辑</a>
                        <a href="javascript:doDelete(id)">删除</a>
                    </td>
                </tr>

                <tr bgcolor="f8f8f8">
                    <td align="center"><input type="checkbox" name="selectedRow" value="" /></td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">
                        <a href="javascript:doEdit(id)">编辑</a>
                        <a href="javascript:doDelete(id)">删除</a>
                    </td>
                </tr>

                <tr bgcolor="f8f8f8">
                    <td align="center"><input type="checkbox" name="selectedRow" value="" /></td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">xxx</td>
                    <td align="center">
                        <a href="javascript:doEdit(id)">编辑</a>
                        <a href="javascript:doDelete(id)">删除</a>
                    </td>
                </tr>

            </table>

        </div>

</form>
    </body>
<!--
我们在UserAction中加入“private String[] selectedRow; ”参数和get与set方法，
用来接收从界面上选定的需要删除的信息的id的集合，之后修改批量删除方法:

-->
</html>

原文地址：https://www.cnblogs.com/moonsoft/p/10358316.html

时间： 2024-10-01 01:50:34

列表全选与全反选的相关文章

JQuery实现列表中复选框全选反选功能封装

JQuery实现列表中复选框全选反选功能封装我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: 1 $(':checkbox[data-check-target]').click(function () { 2

jquery实现全选、全不选、反选、获取选中的所有值总结

HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html><html><head> <meta charset="UTF-8"> <title>checkbox2</title> <style> li { list-style:none; } </style> <script src="js/

全选／全不选／反选

HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <ul id="list"> <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> <li><label><input type="checkb

jquery的全选，全不选，反选

jquery的全选,全不选,反选: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryselect.aspx.cs" Inherits="WebApplication9.jqueryselect" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh

多选框的全选、全不选、反选

要实现多选框的选择相关映射,要实现以下逻辑: 1.全选框被点击时,所以子选框被选中. 2.当全选状态下,子选框的其中一个撤销点击,全选框自动unchecked 3.为全选状态下,子选框一个个全部选中,最后一个子选框框点击之后,全选框自动checked var information=$("#"+flag).find(".information"); var $newsCheck = information.find("input[name='newsCh

jquery实现全选、全不选和反选

全选和全不全都实现都比较简单 $('input:checkbox').attr('checked','checked'); //全选 $('input:checkbox').removeAttr('checked'); //全不选反选分三步:1找到所有已选的checkbox,2将所有的checkbox设置为选中,3将之前找到的已选checbox设置为不选(如有更好的方法请留言讨论) var checked = $('input:checkbox:checked'); //找到所有已选的chec

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>石家庄车库棚|tongtianty.net---复选框全选.全不选和反选的效果实现</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin func

jQuery实现复选框全选/全部取消/反选/获得选择的值

本地单文件上传脚本,命名uf 这是在本机上做的测试,利用bpcs_uploader脚本实现,只是进行简单的封装,自动完善云端文件路径. 技术要点:使用dirname获取文件所在目录,使用pwd获取文件完整路径,并作为云端文件路径. #!/bin/bash cur_dir=$(cd "$(dirname "$1")"; pwd) name=$(basename "$1") /home/grm/bin/bpcs_uploader/bpcs_uploa