zoukankan      html  css  js  c++  java
  • jquery checbox全选和取消全选

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    // 表格的隔行换色
    $(function () {
    $("tbody tr:odd").addClass("odd");
    $("tbody tr:even").addClass("even");
    });
    </script>
    </head>
    <body>
    <table id="tab1" border="1" width="80%" align="center">
    <thead>
    <tr>
    <th>
    <input type="checkbox" id="selectAll" />
    </th>
    <th>
    分类的ID
    </th>
    <th>
    分类的名称
    </th>
    <th>
    分类的描述
    </th>
    <th>
    操作
    </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>
    <input type="checkbox" name="ids" />
    </td>
    <td>
    1
    </td>
    <td>
    手机数码
    </td>
    <td>
    手机数码
    </td>
    <td>
    <a href="">修改</a>|<a href="">删除</a>
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="ids" />
    </td>
    <td>
    2
    </td>
    <td>
    电脑办公
    </td>
    <td>
    电脑办公
    </td>
    <td>
    <a href="">修改</a>|<a href="">删除</a>
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="ids" />
    </td>
    <td>
    3
    </td>
    <td>
    烟酒糖茶
    </td>
    <td>
    烟酒糖茶
    </td>
    <td>
    <a href="">修改</a>|<a href="">删除</a>
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="ids" />
    </td>
    <td>
    4
    </td>
    <td>
    鞋靴箱包
    </td>
    <td>
    鞋靴箱包
    </td>
    <td>
    <a href="">修改</a>|<a href="">删除</a>
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="ids" />
    </td>
    <td>
    5
    </td>
    <td>
    汽车用品
    </td>
    <td>
    汽车用品
    </td>
    <td>
    <a href="">修改</a>|<a href="">删除</a>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    <script type="text/javascript">
    // 复选框的全选和全不选
    // $(function () {
    // // 获得上面的复选框
    // var $selectAll = $("#selectAll");
    // $selectAll.click(function () {
    // if ($selectAll.attr("checked") == true) {
    // $(":checkbox[name='ids']").attr("checked", true);
    // } else {
    // // 上面的复选框没被选中
    // $(":checkbox[name='ids']").attr("checked", false);
    // }
    // });
    // });

    $(function () {
    var all = $("#selectAll");
    all.click(function () {
    if (all.attr("checked") == true) {
    $(":checkbox[name='ids']").attr("checked", true);
    }
    else {
    $(":checkbox[name='ids']").attr("checked", false);
    }
    })
    })
    </script>
    <%--<script type="text/javascript">
    // 复选框的全选和全不选
    $(function () {
    $("#selectAll").click(function () {
    $(":checkbox[name='ids']").attr("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
    });
    });
    </script>--%>

  • 相关阅读:
    【leetcode_easy】589. N-ary Tree Preorder Traversal
    【linux基础】Ubuntu下的终端多标签切换快捷键
    车道线检测github集锦
    [c++]struct timeval
    [opencv] copyTo函数的使用方法
    [c++]C++关键字之friend
    【动手学深度学习】Jupyter notebook中 import mxnet出错
    【opencv】split
    【leetcode_easy】581. Shortest Unsorted Continuous Subarray
    第1课 学习Lua的意义
  • 原文地址:https://www.cnblogs.com/wugh8726254/p/13097478.html
Copyright © 2011-2022 走看看