全选：

这里是用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. MySql：SELECT 语句（一）基本查询

    1.检索单个列 语句:SELECT col FROM tablename; 2.检索多个列 语句:SELECT col1, col2 FROM tablename; 3.检索所有列 使用 * 通配符. ...

  2. Linux命令:pwd

    打印当前目录的完全路径. -L 打印路径包含符合路径 -P 打印路径不含符合路径. -LP,可能打印的不同,取决于你对进入当前目录的方式是通过符号链接进入,还是物理目录进入.如果是符号链接进入,则-L ...

  3. SQL Server 磁盘请求超时的833错误原因分析以及解决

    本文出处:http://www.cnblogs.com/wy123/p/6984885.html 最近遇到一个SQL Server服务器响应极度缓慢,并且出现客户端请求报错的情况,在数据库中的erro ...

  4. 史上最坑 idea 更改代码不生效

    原来, 如果本地多次调整过系统时间,那么gradle 的缓存 会缓存 你的 上次编译时间再未来,那么你再怎么编译,都很难生效,即使删除了生成的字节码目录. 然后invalidate caches/re ...

  5. python入门（四）：字符串、编码、random

    1.字符串 字符串基本有两种类型,str和bytes >>> s="a" >>> type(s) <class 'str'>     ...

  6. App后台Keynote

    [App后台Keynote] 一.基础. 1.一个 节省 流量 的 处理 方法 是 让 App 下载 经过 压缩 的 图片( 一般 是 几十 KB 以下), 当 用户 需要 查看 原图 时 才 下载 ...

  7. ppt复制文本框文字到word的方法

    打开ppt按Alt+F11,插入--模块,  选中“工具”--“引用”--MicroSoft Word .. 复制代码: Sub Main() On Error Resume Next Dim tem ...

  8. 十四、ChainOfResponsibility 责任链模式

    设计: 代码清单: Trouble: public class Trouble { private int number; public Trouble(int number){ this.numbe ...

  9. 中间件之Kafka

    (一)kafka简介 Kafka/Jafka 高性能跨语言的分布式发布/订阅消息系统,数据持久化,全分布式,同时支持在线和离线处理. 1.1 kafka设计目标 高吞吐率 在廉价的商用机器上单机可支持 ...

  10. elasticsearch 动态增加副本

    动态调整副本数 PUT /ptt-new-2018-11/_settings{ "number_of_replicas": 2} 重建索引, 增加节点后要重建索引. 日志报错为网络 ...