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>
  • 相关阅读:
    第五周反向传播算法
    PHP数组排序
    <meta-data>
    Android之Intent
    Fragment生命周期
    前端后台学习笔记汇杂
    IntelliJ IDEA 14.x 与 Tomcat 集成,创建并运行Java Web项目
    用java将excel中数据导入mysql
    幸运观众抽奖
    JTextField
  • 原文地址:https://www.cnblogs.com/wangchongzhangdan/p/9409624.html
Copyright © 2011-2022 走看看