全选：

这里是用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. Node Sass does not yet support your current environment解决办法

    在React项目中,使用了sass.之前运行的好好的,今天突然报错,提示当前环境不支持sass模块,然后就百度了下,发现有相同问题的.原来问题是之前开发时node是6.x的版本,几天前更新到最新10. ...

  2. 吴裕雄 python深度学习与实践（7）

    import cv2 import numpy as np img = np.mat(np.zeros((,))) cv2.imshow("test",img) cv2.waitK ...

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

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

  4. pycharm 下使用tensorflow 之环境配置

    我们常常看代码使用ide里面看,而且还可以看到调试信息(虽然tensorflow有专门的调试介绍哈) 但是,常常代码在终端里面执行可以直接执行,但是到pycharm里面就会出现各种问题,常见的就是找不 ...

  5. 定时任务 spring @Scheduled注解

    使用spring @Scheduled注解执行定时任务: 运行!!! 关于Cron表达式(转载) 表达式网站生成: http://cron.qqe2.com/  直接点击 cronExpression ...

  6. Es6（Symbol，set，map，filter）

    首先再讲这几个新东西之前,先说一个Es6中新出的扩展运算符(...) 1.展开运算符,就是把东西展开,可以用在array和object上 比如: let a=[,] let b=[,...a,]//[ ...

  7. 远程连接ORACLE服务

    远程服务端操作系统: Windows Server 2003 Enterprise Edition sp2ORACLE 版本: Oracle 9.2.0.1.0 正式版 本地客户端操作系统: Wind ...

  8. 【mac环境】终端配色 & 配置使用ll命令

    1.MAC OS X 命令终端的颜色显示 打开 terminal 会发现 ls 和 grep 后的结果是没有色彩的,这时候可以这么干: 用 vim 打开文件 ~/.bash_profile,然后把下边 ...

  9. java得到当前日期的前一天或后一天

    public String getNextDay(String startdate) throws ParseException{ Date date = (new SimpleDateFormat( ...

  10. Spring InitializingBean 接口以及Aware接口实现的原理

    关于Spring InitializingBean 接口以及Aware接口实现的其实都在 第11步中: finishBeanFactoryInitialization() 方法中完成了3部分的内容: ...