• 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>--%>

  • 相关阅读:
    详细讲解Linux下安装python3(Python3.5.4)
    JavaScript抽象语法树英文对照
    关于MacBook Pro外接4K/60HZ显示器的问题
    Vue组件v-if新渲染的组件不更新
    Vue 子组件与子组件之间传值
    Spring整合CXF步骤,Spring实现webService,spring整合WebService
    CXF错误:Unsupported major.minor version 51.0,java.lang.UnsupportedClassVersionErro
    springMvc中406错误解决,springMvc使用json出现406 (Not Acceptable)
    jquery.validate中使用remote,remote相同值不校验问题解决
    MyBatis返回主键,MyBatis Insert操作返回主键
  • 原文地址:https://www.cnblogs.com/wugh8726254/p/13097478.html
Copyright © 2020-2023  润新知