zoukankan      html  css  js  c++  java
  • JavaScript(13):用jQuery实现复选框的全、反、取选

        以下给出完整示例代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用jQuery实现复选框的全、反、取选</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>城市</th>
                    <th>特产</th>
                    <th>美景</th>
                    <!--th是指表格表头,要加粗-->
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>武汉</td>
                    <td>热干面</td>
                    <td>黄鹤楼</td>
                    <!--td指表格的单元格,正常字体显示即可-->
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>海口</td>
                    <td>清补凉</td>
                    <td>骑楼</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>重庆</td>
                    <td>火锅</td>
                    <td>洪崖洞</td>
                </tr>
            </tbody>
        </table>
    
        <input type="button" value="全选" onclick="e_check();">
        <input type="button" value="反选" onclick="r_check();">
        <input type="button" value="取消" onclick="c_check();">
    
        <script src="../HTML_may/jquery-1.12.4.js"></script>
        <script>
            function e_check() {
                $('#tb :checkbox').prop('checked',true);
            }
    
            function r_check() {
                $('#tb :checkbox').each(function () {
                    var r = $(this).prop('checked')?false:true;
                    $(this).prop('checked',r);
                });
            }
    
            function c_check() {
                $('#tb :checkbox').prop('checked',false);
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    vue中路由跳转传递参数
    父组件向子孙组件传递数据provide/inject
    微信、QQ等内置浏览器定位失败
    Java ArrayList类
    java 生成 [1, n] 之间的随机数
    Java 构造方法
    Java this关键字
    Java private关键字及作用
    Java 随笔
    Java 内存划分
  • 原文地址:https://www.cnblogs.com/wangchongzhangdan/p/9409624.html
Copyright © 2011-2022 走看看