通过 JQuery 从 CheckBoxList 中查找特定的复选框答案

【问题标题】：Find particular Checkbox from CheckBoxList via JQuery通过 JQuery 从 CheckBoxList 中查找特定的复选框
【发布时间】：2015-01-23 15:10:26
【问题描述】：

我在查找特定复选框时遇到了一些麻烦。在具有大约 100 个复选框的动态 asp.net CheckboxList 中，我有一个右键单击上下文菜单，并且想要获取打开上下文菜单的特定复选框。

<%= checkboxlist.ClientID%>

只给我整个复选框列表

这是我的 javascript/JQuery：

<script type="text/javascript">

    function ShowMenu(control, e) {
        var posx = e.clientX + window.pageXOffset + 'px';
        var posy = e.clientY + window.pageYOffset - 10 + 'px';
        document.getElementById(control).style.position = 'absolute';
        document.getElementById(control).style.display = 'inline';
        document.getElementById(control).style.left = posx;
        document.getElementById(control).style.top = posy;
        var parent = document.getElementById('<%= cbl_Machines.ClientID%>');
    };

    function HideMenu(control) {
        document.getElementById(control).style.display = 'none';
    };

    $(document).on('click', '#divSelectAll', function () {
        $("INPUT[type='checkbox']").prop('checked', true);
        __doPostBack();
    });

    $(document).on('click', '#divDeselectAll', function () {
        $("INPUT[type='checkbox']").prop('checked', false);
        __doPostBack();
    });

    $(document).on('click', '#divAddMachine', function () {
        window.location.replace("../MemberPages/CreateMachine.aspx");
    });

    $(document).on('click', '#divModifyMachine', function () {
        alert('<%=cbl_Machines.ClientID%>');
    });
</script>

这是我的 HTML：

<body>
<div id="leftBox" onmousedown="HideMenu('contextMenu');"oncontextmenu="ShowMenu('contextMenu',event);">
    <asp:CheckBoxList ID="cbl_Machines" Width="100%" RepeatLayout="Table" CssClass="cblmachines" runat="server" AutoPostBack="True" OnSelectedIndexChanged="cbl_Machines_SelectedIndexChanged" />
    <div style="padding: 0px 5px; border: 1px solid black; border-top-style: none">
        <asp:Button ID="btn_CreateMachine" Width="33%" runat="server" Text="Add Machine" OnClick="btn_CreateMachine_Click" />
        <asp:Button ID="btn_ModifyMachine" Width="32%" runat="server" Text="Modify Machine" OnClick="btn_ModifyMachine_Click" />
        <asp:Button ID="btn_DeleteMachine" Width="32%" runat="server" Text="Delete Machine" OnClick="btn_DeleteMachine_Click" />
    </div>
</div>

<div style="display: none;" id="contextMenu" onmouseup="HideMenu('contextMenu');">
    <table border="0" style="border: thin solid #808080; cursor: default; width: 150px; background-color: white">
        <tr>
            <td>
                <div id="divSelectAll" class="ContextItem">Select All</div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="divDeselectAll" class="ContextItem">Deselect All</div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="divAddMachine" class="ContextItem">Add Machine</div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="divModifyMachine" class="ContextItem">Modify Machine</div>
            </td>
        </tr>
    </table>
</div>
</body>

最后但并非最不重要的是我的代码背后

        if (!Page.IsPostBack)
        {
            Configuration.DeserializeFromXMLMachines();

            var orderedList = Configuration.ManagedMachines.OrderBy(x => x.MachineName);
            foreach (var item in orderedList)
            {
                cbl_Machines.Items.Add(item.MachineName+ "<a class='HLdetails' href=\"MachineDetails.aspx?Name=" + item.MachineName + "\">></a>");
            }
        }

当我右键单击“leftBox”Div 时，会出现以下上下文菜单

http://i.imgur.com/h4fqHye.jpg

现在，当我单击修改机器时，我只需要打开上下文菜单的复选框的值。在本例中，值为 Test24。

【问题讨论】：

菜单事件的代码在哪里？您不能使用服务器代码来隔离 UI 事件
Samy - 我编辑了您发布的“答案”中的附加数据。请edit这个问题以确保它按照您的预期阅读。

标签： jquery asp.net checkboxlist

【解决方案1】：

也许使用checkboxlist.SelectedItem 和它的属性可以让你到达某个地方。您必须为每个单独的复选框设置一个值或唯一的 HTML id，以允许 jQuery 实际找到它。

您还可以通过在您已经拥有其 ClientID 的 CheckBoxList 的 input 子项（复选框）中搜索，从您已经在的位置开始。假设只选中了一个复选框，此代码将返回其关联的 jQuery 对象（未经测试，我现在无法使用开发工具）：

var selected = $("#<%=checkboxlist.ClientID %> input:checked");

【讨论】：

感谢您的帮助，但我不需要选中的复选框列表。我试图只获得一个我右键单击的复选框。有什么建议吗？
好的，我通过 event.target.innerHTML 找到了点击的复选框值
哎呀对不起，我完全误解了你的问题！