全选：

这里是用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. Asp.net之Sql注入与Parameter对象

    一.Sql注入实例 using System; using System.Collections.Generic; using System.Data; using System.Data.SqlCl ...

  2. VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）

    步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...

  3. OpenCV常用数据类型

    Point 二维点坐标(x,y) typedef Point3_<int> Point3i; typedef Point3_<float> Point3f; typedef P ...

  4. Python开发【第八篇】：socket网络编程

    服务端: import socket server = socket.socket() #绑定要监听的端口 server.bind(('localhost',6969)) #监听 server.lis ...

  5. kubernetes 基础

    官网 kubernetes.io 有中文 中文网站  http://docs.kubernetes.org.cn kubectl 详细情况 https://kubernetes.io/docs/ref ...

  6. 微信小程序之---- 数据处理

    exports 关键字      .wxs 通过该属性,可以对外共享本模块的私有变量与函数   使用步骤 1. 在 .wxs后缀文件 exports定义参数 var foo = "'hell ...

  7. （转载）Android开发——Android中常见的4种线程池（保证你能看懂并理解）

    0．前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52415337 使用线程池可以给我们带来很多好处,首先通过线程池中线程的重用 ...

  8. git 忽略文件不起作用

    本人需要提交项目文件,发现总有一些东西不需要提交,然后搜索有”.gitignore”文件可以忽略一些提交,但是发现添加上没有起作用. 要贴的是: /build/ target/ .idea/ *.im ...

  9. ABP Xunit单元测试 第五篇

    1.创建如下的项目结构 public class TestName { public bool ValidateName(string Name) { if (Name == "yin&qu ...

  10. 第三次spring会议

    昨天天所做之事: 我用C#用DelectText对行数进行了定义,刚开始写代码有点无从下手. 遇到的问题:刚开始用datagridView进行了文本的输入,但是它更适合EXCEL之类的数据计算不符合我 ...