全选：

这里是用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. React.js 学习笔记

    React.js React.js 是时下最流行的前端 JavaScript 框架之一. 创建工程 # 安装 CLI $ npm install -g create-react-app # 创建新的应 ...

  2. CSS3 Box-sizing（转载）

    转载自:W3CPLUS Airen的博客:http://www.w3cplus.com/content/css3-box-sizing box-sizing是CSS3的box属性之一.一说到CSS的盒 ...

  3. Jquery中父，子页面之间元素获取及方法调用

    一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  4. tensorflow 升级后报错：ImportError: libcudnn.so.6: cannot open shared object file: No such file or directory

    我的tensorflow之前的版本是1.2的所以支持cudnn5,但是tensorflow1.3及以上就是支持cudnn6. 查看: /usr/local/cuda/lib64$ ls  libcud ...

  5. C#发送QQ邮件

    1.首先配置一下发件人的账号密码(密码根据自己所选择的的邮箱填写,此处不做展示) <?xml version="1.0" encoding="utf-8" ...

  6. linux网络日志分析

    1.清空日志的技巧 2.访问日志格式分析 3. web日志统计举例

  7. as3:sprite作为容器使用时，最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  8. Python的基本用法

    ---恢复内容开始--- 一.函数 1.1 默认参数 想要计算一个数x的n次方,可以定义如下的函数.但是有时候我们仅仅只需要计算x^2,所以只想使用一个参数即power(x),这时如果仍用如下代码会报 ...

  9. ORACLE查询内存溢出

    首先我们来看一个带排序的查询,点击工具栏的显示包含实际的执行计划. 1 SELECT * FROM AdventureWorks2008R2.Person.Person WHERE FirstName ...

  10. error link 2019 waveout

    winmm.lib的影响 在做音频播放的时候使用到了win系统音频函数waveout; 但是报错: error link 2019 无法解析外部符号:waveoutGetnumDevice /clos ...