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>
  • 相关阅读:
    git
    fragment
    Builder模式
    代码混淆
    android studio快捷键
    小知识点
    angular组件使用
    英语摘要2019-6-4
    英语笔记2019-4-3
    搭建Eureka注册中心时遇到的问题
  • 原文地址:https://www.cnblogs.com/wangchongzhangdan/p/9409624.html
Copyright © 2011-2022 走看看