Jquery选中行实现行中的Checkbox的选中与取消选中-优快云博客

本文介绍了一个ASP.NET页面结合jQuery实现表格行背景颜色变化的功能。通过点击复选框或表格行来改变背景颜色，实现了良好的交互效果。该示例展示了如何在服务器控件与JavaScript/jQuery之间进行有效交互。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input[type=checkbox]").on("click", function (e) {
                e.stopPropagation();//阻止冒泡 
                $("#info tr").each(function () {
                    if ($(this).find("input[type=checkbox]").is(":checked")) {
                        $(this).css("background-color", "pink");
                    }
                    else {
                        $(this).css("background-color", "");
                    }
                })
            })
            $("#info").find("tr").click(function () {
                var checkbox = $(this).find("input[type=checkbox]");
                if (checkbox.is(":checked")) {
                    checkbox.prop("checked", false);
                    $(this).css("background-color", "");
                } else {
                    checkbox.prop("checked", true);
                    $(this).css("background-color", "pink");
                }
            })
        })
    </script>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }
 
            table tr td {
                border: 1px solid red;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table id="info">
                <tr>
                    <td style="width: 40px;">选择</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>备注</td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox1" runat="server" /></td>
                    <td>张三</td>
                    <td>123</td>
                    <td>喝完了酒两位咯危机or叫我阿胶尾盘快速扩散的扑克牌上看到佛山恐怕文凭</td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox2" runat="server" /></td>
                    <td>张三</td>
                    <td>123</td>
                    <td>喝完了酒两位咯危机or叫我阿胶尾盘快速扩散的扑克牌上看到佛山恐怕文凭</td>
                    <tr>
                        <td>
                            <asp:CheckBox ID="CheckBox3" runat="server" /></td>
                        <td>张三</td>
                        <td>123</td>
                        <td>喝完了酒两位咯危机or叫我阿胶尾盘快速扩散的扑克牌上看到佛山恐怕文凭</td>
                    </tr>
                    <tr>
                        <td>
                            <asp:CheckBox ID="CheckBox4" runat="server" /></td>
                        <td>张三</td>
                        <td>123</td>
                        <td>喝完了酒两位咯危机or叫我阿胶尾盘快速扩散的扑克牌上看到佛山恐怕文凭</td>
                    </tr>
                    <tr>
                        <td>
                            <asp:CheckBox ID="CheckBox5" runat="server" /></td>
                        <td>张三</td>
                        <td>123</td>
                        <td>喝完了酒两位咯危机or叫我阿胶尾盘快速扩散的扑克牌上看到佛山恐怕文凭</td>
                    </tr>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>