Find particular Checkbox from CheckBoxList via JQuery

Question

0.00/5 (No votes)

See more:

, +

I have some trouble finding a particular Checkbox. In a dynamic asp.net CheckboxList with approximately 100 Checkboxes, I have a right click context menu and want to get the particular Checkbox on which I opened the context menu.

Here is my javascript/JQuery:

XML

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

And here is my HTML:

XML

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

And last but not least my Code Behind

C#

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

    var orderedList = Configuration.ManagedMachines.OrderBy(x => x.MachineName);
    foreach (var item in orderedList)
    {
        cbl_Machines.Items.Add(item.MachineName);
    }
}

When I right click in the 'leftBox' Div the following Context Menu appears

And now when I click on Modify Machine I only need the value of this checkbox where the Context Menu opens. In this Case the one with the value Test24.

Thanks in advance

Posted 26-Jan-15 1:43am

Member 11174723

Updated 26-Jan-15 1:46am

v2

Add a Solution

Comments

ZurdoDev 26-Jan-15 8:13am

Where are you stuck? Does it have it's own ID? If not, you'll need to select somehome. See jquery selectors, http://api.jquery.com/category/selectors/

Sinisa Hajnal 26-Jan-15 9:50am

Try with :closest selector if you can use this for clicked element...

Member 11174723 27-Jan-15 4:45am

I'm only getting all checkboxes with
$("INPUT[type='checkbox']").closest('input');
any other suggestions?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 11174723 · Accepted Answer · 2015-01-27T01:20:00

Solution 1

ok I found the clicked checkbox value via event.target.innerHTML

Posted 27-Jan-15 1:20am

Member 11174723