• jq 表格全选案例


    <div class="wrap">
    <table>
    <thead>
    <tr>
    <th>
    <input type="checkbox" id="j_cbAll"/>
    </th>
    <th>菜名</th>
    <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>红烧肉</td>
    <td>田老师</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>西红柿鸡蛋</td>
    <td>田老师</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>红烧狮子头</td>
    <td>田老师</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>日式肥牛</td>
    <td>田老师</td>
    </tr>

    </tbody>
    </table>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(function () {
    $("#j_cbAll").click(function () {
    $("#j_tb input").prop("checked",$(this).prop("checked"));
    });
    $("#j_tb input").click(function () {
    if($("#j_tb input:checked").length==$("#j_tb input").length){
    $("#j_cbAll").prop("checked",true);
    }else {
    $("#j_cbAll").prop("checked",false);
    }
    });
    });
    </script>
  • 相关阅读:
    现代算法(一) 基因算法
    01-02周 学习总结
    Linux命令之touch详解
    Linux命令之umask详解
    Linux命令之wc详解
    Linux命令之stat详解
    Linux命令之tail详解
    Linux命令之head详解
    Linux命令之less详解
    Linux命令
  • 原文地址:https://www.cnblogs.com/lujieting/p/10099498.html
Copyright © 2020-2023  润新知