通过JQuery从CheckBoxList中查找特定的Checkbox [英] Find particular Checkbox from CheckBoxList via JQuery

问题描述

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





这是我的javascript / JQuery：

 <   script     type   =  text / javascript >  
 
功能ShowMenu（对照，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 ％>  ）; 
}; 
 
函数HideMenu（控制）{
 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   宽度  =  100％    RepeatLayout   = 表    CssClass   =  cblmachines     runat   =  server    AutoPostBack   =  True    OnSelectedIndexChanged   =  cbl_Machines_SelectedIndexChanged    /  >  
 <   div     style   =  padding：0px 5px;边框：1px纯黑色; border-top-style：none >  
 <   asp：按钮    ID   =  btn_CreateMachine   宽度  =  33％    runat   =  server < span class =code-attribute>  文本  = 添加计算机    OnClick   =  btn_CreateMachine_Click    /  >  
 <   asp：按钮    ID   =  btn_ModifyMachine   < span class =code-attribute>宽度  =  32％    runat   =  server   文字  = 修改机器    OnClick  < span class =code-keyword> =  btn_ModifyMachine_Click    /  >  
 <   asp：按钮    ID   =  btn_DeleteMachine   宽度  =  32％    runat   =  server   文本  = 删除计算机    OnClick   =  btn_DeleteMachine_Clic k    /  >  
 <   / div  >  
 <   / div  > ;  
 
 <   div     style   = 显示：none;    id   =  contextMenu    onmouseup   =  HideMenu（'contextMenu'）; >  
 <   table     border   =  0    style   =  border：thin solid＃808080; cursor：default;宽度：150px; background-color：white >  
 <   tr  >  
 <   td  >  
 <   div     id   =  divSelectAll    class   =  ContextItem > 全选<   / div  >  
 <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td  >  
 <  < span class =code-leadattribute> div     id   =  divDeselectAll    class   =  ContextItem > 取消选择所有<   / div  >  
 <   / td  >  
 <   / tr  >  
 <  < span class =code-leadattribute> tr  >  
 <   td  >  
 <   div     id   =  divAddMachine    class   =  Co ntextItem > 添加计算机<   / div  >  
 <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td  >  
 <   div     id   =  divModifyMachine    class   =  ContextItem > 修改机器<   / div  >  
 <   / td  >  
 <   / tr  >  
 <   / table  >  
 <   / div  >  
 <   / body  >  

< br / >
最后但并非最不重要的是我的代码背后

 如果（！Page.IsPostBack）
 {
 Configuration.DeserializeFromXMLMachines（）; 
 
  var  orderedList = Configuration.ManagedMachines.OrderBy（x = >  x .MachineName）; 
  foreach （ var  item  in  orderedList）
 {
 cbl_Machines.Items.Add（item.MachineName）; 
} 
} 
 

当我右键点击'leftBox'Div以下<出现一个href =http://i.imgur.com/h4fqHye.jpg>上下文菜单









现在当我点击Modify Machine时，我只需要上下文菜单打开的复选框的值。在这种情况下，值为Test24的那个。





提前致谢

解决方案

（document）.on（'click'，'＃divSelectAll'，function（）{

（INPUT [type ='checkbox']）。prop（'选中'，true）;
__doPostBack（）;
}）;

（document）.on（'click'，'＃divDeselectAll'，function（） {

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:

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

<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

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

解决方案

(document).on('click', '#divSelectAll', function () {

("INPUT[type='checkbox']").prop('checked', true); __doPostBack(); });

(document).on('click', '#divDeselectAll', function () {

这篇关于通过JQuery从CheckBoxList中查找特定的Checkbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！