全选：

这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8378221.html

如果使用jQuery则会方便很多：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>全选和全不选</title>

        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

        <script>

            $(function(){

                $("#checkAll").click(function(){

                    //$("tbody input").attr("checked",this.checked);

                    //这种方式对高版本jQuery不适用，下边方法适用于所有版本

                    $("tbody input").prop("checked",this.checked);

                });

            });

        </script>

    </head>

    <body>

        <table border="1" width="500" height="50" align="center">

            <thead>

                <tr>

                    <th><input type="checkbox" id="checkAll" /></th>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td><input type="checkbox" name="checkOne" /></td>

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="checkOne" /></td>

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="checkOne" /></td>

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="checkOne" /></td>

                    <td>4</td>

                    <td>赵六</td>

                    <td>29</td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="checkOne" /></td>

                    <td>5</td>

                    <td>田七</td>

                    <td>30</td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="checkOne" /></td>

                    <td>6</td>

                    <td>汾九</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

二级联动：

这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8378459.html

使用jQuery实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>注册页面重新布局</title>

        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

        <script>

            $(function() {

                //2.创建二维数组用于存储省份和城市

                var cities = new Array(3);

                cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");

                cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");

                cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");

                cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");

                $("#province").change(function() {

                    //10.清除第二个下拉列表的内容

                    $("#city").empty();

                    //1.获取用户选择的省份

                    var val = this.value;

                    //3.遍历二维数组中的省份

                    $.each(cities, function(i, n) {

                        //4.判断用户选择的省份和遍历的省份

                        if(val == i) {

                            //5.遍历该省份下的所有城市

                            $.each(cities[i], function(j, m) {

                                //6.创建城市文本节点

                                var textNode = document.createTextNode(m);

                                //7.创建option元素节点

                                var opEle = document.createElement("option");

                                //8.将城市文本节点添加到option元素节点中去

                                $(opEle).append(textNode);

                                //9.将option元素节点追加到第二个下拉列表中去

                                $(opEle).appendTo($("#city"));

                            });

                        }

                    });

                });

            });

        </script>

    </head>

    <body>

        <div id="content">

            <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">

                <form method="get" action="#" onsubmit="return checkForm()">

                    <tr>

                        <td colspan="2" align="center">

                            <font size="5">会员注册</font>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            用户名

                        </td>

                        <td>

                            <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>

                        </td>

                    </tr>

                    <tr>

                        <td>密码</td>

                        <td>

                            <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>

                        </td>

                    </tr>

                    <tr>

                        <td>确认密码</td>

                        <td>

                            <input type="password" name="repassword" />

                        </td>

                    </tr>

                    <tr>

                        <td>email</td>

                        <td>

                            <input type="text" name="email" id="email" />

                        </td>

                    </tr>

                    <tr>

                        <td>姓名</td>

                        <td>

                            <input type="text" name="name" />

                        </td>

                    </tr>

                    <tr>

                        <td>籍贯</td>

                        <td>

                            <select id="province">

                                <option>--请选择--</option>

                                <option value="0">湖北</option>

                                <option value="1">湖南</option>

                                <option value="2">河北</option>

                                <option value="3">河南</option>

                            </select>

                            <select id="city">

                            </select>

                        </td>

                    </tr>

                    <tr>

                        <td>性别</td>

                        <td>

                            <input type="radio" name="sex" value="男" />男

                            <input type="radio" name="sex" value="女" />女

                        </td>

                    </tr>

                    <tr>

                        <td>出生日期</td>

                        <td>

                            <input type="text" name="birthday" />

                        </td>

                    </tr>

                    <tr>

                        <td>验证码</td>

                        <td>

                            <input type="text" name="yanzhengma" />

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2">

                            <input type="submit" value="注册" />

                        </td>

                    </tr>

                </form>

            </table>

        </div>

    </body>

</html>

jQuery应用实例3：全选、二级联动的更多相关文章

  1. jquery实现checkbox的全选

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> < ...

  2. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  3. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  4. jquery一键控制checkbox全选，反选，全不选。

    jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法. Hml的checkbox没有加name,只用了 div 嵌套. 如有更好的方法,望指点!! //全选 ...

  5. JQuery实现表格的全选和反选，以及分页勾选保存（laypage插件分页的使用）

    需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...

  6. jquery中checkbox的全选与反选

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  7. jquery easyui tree的全选与反选

    //全选反选 //参数:selected:传入this,表示当前点击的组件 //treeMenu:要操作的tree的id:如:id="userTree" function tree ...

  8. jquery prop()方法 解决全选 不全选 反选 问题 解决执行一次不不能再执行问题

    //1.如果通过prop()函数更改<input>和<button>元素的type属性,在多数浏览器上将会抛出一个错误,因为该属性一般不允许在后期更改.//如果使用prop() ...

  9. jQuery菜单示例（全选，反选，取消）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. JQuery实现的 checkbox 全选；<select>下拉框功能

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

随机推荐

  1. ansible自动化运维详细教程及playbook详解

    前言 当下有许多的运维自动化工具( 配置管理 ),例如:Ansible.SaltStack.Puppet.Fabric 等. Ansible 一种集成 IT 系统的配置管理.应用部署.执行特定任务的开 ...

  2. R语言-地图

    1.maps包的map()函数 >map('world', fill = TRUE,col=heat.colors(10)) #世界地图 >map("state", i ...

  3. redis 动态修改配置与备份文件目录

    redis-cli -c -h 10.1.1.1 -p 7000 获取所有可以配置的KEY config get * 设置KEY config set * 配置重新写入配置文件 CONFIG REWR ...

  4. Linux LVM扩容和缩容

    将原硬盘上的LVM分区/dev/mapper/RHEL-Data由原来的60G扩展到80G Step1:将LVData扩容+20G,如下图: [root@esc data]# lvextend -L ...

  5. 289. Game of Life数组生存游戏

    ［抄题］: According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a ...

  6. 震惊！90%的程序员不知道的Java知识！

    震惊!90%的程序员不知道的Java知识! 初学Java的时候都会接触的代码 public static void main(String[] args){ ... } 当时就像背公式一样把这行代码给 ...

  7. 关于前端设置cookie

    cookie既可以后端设置也可以在前端设置,例如登陆/注册功能,每次都要向服务器请求用户数据,这种就可以把cookie放到前端储存起来. 当网页要发http请求时,浏览器会先检查是否有相应的cooki ...

  8. ORM常用字段介绍

    Django中的ORM Django项目使用MySQL数据库 1. 在Django项目的settings.py文件中,配置数据库连接信息: DATABASES = { "default&qu ...

  9. RNA-seq差异表达基因分析之TopHat篇

    RNA-seq差异表达基因分析之TopHat篇 发表于2012 年 10 月 23 日 TopHat是基于Bowtie的将RNA-Seq数据mapping到参考基因组上,从而鉴定可变剪切(exon-e ...

  10. rsyslog和logrotate

    简介 rsyslog 是一个 syslogd 的多线程增强版. 现在Fedora和Ubuntu, rhel6默认的日志系统都是rsyslog了 rsyslog负责写入日志, logrotate负责备份 ...