Question

我有两个复选框列表;相同的价值观我已经有jQuery代码用于Check All复选框。我不擅长jQuery / JavaScript，因此我在线编辑代码以使用我的代码。

但是，我需要让代码正常工作，这样如果我在一个复选框列表中选择一个项目，则另一个复选框列表中的相同项目将自动取消选中;反之亦然。

谢谢..

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            body
            {
                font-family: Arial;
                font-size:10pt;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
            <script type="text/javascript">
            $(function () {
                $("[id*=chkStockAll]").bind("click", function () {
                    if ($(this).is(":checked")) {
                        $("[id*=chkStockFruits] input").attr("checked", "checked");
                        $("[id*=chkOrderAll]").removeAttr("checked");
                        $("[id*=chkOrderFruits] input").removeAttr("checked");
                    } else {
                        $("[id*=chkStockFruits] input").removeAttr("checked");
                    }
                });
                $("[id*=chkStockFruits] input").bind("click", function () {
                    if ($("[id*=chkStockFruits] input:checked").length == $("[id*=chkStockFruits] input").length) {
                        $("[id*=chkStockAll]").attr("checked", "checked");
                    } else {
                        $("[id*=chkStockAll]").removeAttr("checked");
                    }
                });
            });
        </script>

        <script type="text/javascript">
            $(function () {
                $("[id*=chkOrderAll]").bind("click", function () {
                    if ($(this).is(":checked")) {
                        $("[id*=chkOrderFruits] input").attr("checked", "checked");
                        $("[id*=chkStockAll]").removeAttr("checked");
                        $("[id*=chkStockFruits] input").removeAttr("checked");
                    } else {
                        $("[id*=chkOrderFruits] input").removeAttr("checked");
                    }
                });
                $("[id*=chkOrderFruits] input").bind("click", function () {
                    if ($("[id*=chkOrderFruits] input:checked").length == $("[id*=chkOrderFruits] input").length) {
                        $("[id*=chkOrderAll]").attr("checked", "checked");
                    } else {
                        $("[id*=chkOrderAll]").removeAttr("checked");
                    }
                });
            });
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
        <asp:CheckBox ID="chkStockAll" Text="Select Stock All" runat="server" />
        <asp:CheckBoxList ID="chkStockFruits" runat="server">
            <asp:ListItem Text="Mango" />
            <asp:ListItem Text="Apple" />
            <asp:ListItem Text="Banana" />
            <asp:ListItem Text="Pineapple" />
            <asp:ListItem Text="Guava" />
            <asp:ListItem Text="Grapes" />
            <asp:ListItem Text="Papaya" />
        </asp:CheckBoxList>
        <br/>
        <br/>
        <asp:CheckBox ID="chkOrderAll" Text="Select Order All" runat="server" />
        <asp:CheckBoxList ID="chkOrderFruits" runat="server">
            <asp:ListItem Text="Mango" />
            <asp:ListItem Text="Apple" />
            <asp:ListItem Text="Banana" />
            <asp:ListItem Text="Pineapple" />
            <asp:ListItem Text="Guava" />
            <asp:ListItem Text="Grapes" />
            <asp:ListItem Text="Papaya" />
        </asp:CheckBoxList>
        </form>
    </body>
</html>

Answer 1

考虑到有2个复选框列表'CheckBoxList1'和'CheckBoxList2'，我认为下面的代码片段将解决您的问题。

       $document.ready(function () {
        $('#CheckBoxList1').click(function () {
            var checkboxlist = document.getElementById('CheckBoxList1');
            var inputlist = checkboxlist.getElementsByTagName('input');
            var checkboxlist2 = document.getElementById('CheckBoxList2');
            var inputlist2 = checkboxlist2.getElementsByTagName('input');

            for (var i = 0; i < inputlist.length; i++) {
                if (inputlist[i].type == 'checkbox')
                    if (inputlist[i].checked)
                        inputlist2[i].checked = true;
                        else 
                         inputlist2[i].checked =false;
                   }
        });
    });

jQuery - 两个单独的复选框列表;检查一个或另一个中的一个项目，但不是两个

1 个答案: