如何使用Jquery只检查gridview的几个复选框?

时间:2013-01-16 12:37:11

标签: jquery

我有一个列数很少的网格

<div id="AbstractDiv" runat="server" class="DivGrid">
<asp:GridView GridLines="None" ID="Abstract_GridView" runat="server" AutoGenerateColumns="False" CssClass="Grid" CellPadding="0"> 
<Columns>
<asp:TemplateField HeaderText="Select">
 <HeaderTemplate>
 <asp:CheckBox ID="AllChk" runat="server" TabIndex="3"  CssClass="smallCheckbox"/>
 </HeaderTemplate>
 <ItemStyle HorizontalAlign="Center" />
 <ItemTemplate>
 <asp:CheckBox ID="SelectChk" runat="server" TabIndex="5" CssClass="smallCheckbox" />
 </ItemTemplate>
 </asp:TemplateField>
<asp:TemplateField>
 <ItemTemplate>
 <asp:HiddenField ID="EqpNo" runat="server" value='<%# Bind("Equipmnt_No") %>' />
 </ItemTemplate>
</asp:TemplateField>
</Columns>
  </asp:GridView>
 </div>

我在一起检查几个复选框时遇到问题。我有一个EqpNo列,所有EqpNo与所选行匹配的行应检查行复选框。

我提到url,但它只允许检查一行。下面是我的Jquery代码,它检查所有行而不是仅匹配一行。

$('#<%=Abstract_GridView.ClientID %>').delegate('tr', 'click', function () {
 var SelectRowEqpNo = $(this).find("input[id*=EqpNo]").attr("value"); //trying to get the clicked row EqpNo
 $('#<%=Abstract_GridView.ClientID %> tr input[id*="EqpNo"]').each(function () {
   var Eachrw = $(this).val(); //getting each row EqpNo
   if (SelectRowEqpNo == Eachrw) { //Comparing both values if matching 
$('#<%=Abstract_GridView.ClientID %> tr input[id*="SelectChk"]:checkbox').attr('checked', true);              
}
  });
});

3 个答案:

答案 0 :(得分:0)

尝试:

$('#<%=Abstract_GridView.ClientID %>').on('click', 'tr', function () {

 var SelectRowEqpNo = $(this).find("input[id*=EqpNo]").val(); //trying to get the clicked row EqpNo

 $('#<%=Abstract_GridView.ClientID %> tr input[id*="EqpNo"]').each(function () {
   var Eachrw = $(this).val(); //getting each row EqpNo
   if (SelectRowEqpNo === Eachrw) { //Comparing both values if matching 
   $('#<%=Abstract_GridView.ClientID %> tr input[id*="SelectChk"]:checkbox').attr('checked', true);              
     }
  });
});

答案 1 :(得分:0)

我会将css类添加到隐藏字段(仅适用于更简单的jQuery选择器):

<asp:HiddenField ID="EqpNo" runat="server" value='<%# Bind("Equipmnt_No") %>' class="EqpNo" />

UPD:哎呀。出现那个课程根本不允许......奇怪...... 代码已更新以反映该内容。

而不是使用如下代码:

$('.DivGrid').delegate('tr', 'click', function () {
      var SelectRowEqpNo = $(this).find("input.EqpNo").val();
      $(this).closest("table").find('tr input[id*="SelectChk"][value="'+SelectRowEqpNo+'"]')
      .each(function() {
            $("this").closest("tr").find(".smallCheckbox").attr('checked', true);
      });
  });

希望括号没有错误

另请注意,我已删除所有#<%=Abstract_GridView.ClientID %>和类似内容,并将其替换为查找与当前点击的tr相关的元素的函数(如.closest.find)。现在它完全独立于ID,代码更清晰,可以轻松放入外部类

答案 2 :(得分:0)

这是整个代码的工作原理。我已经改变了if块中的jQuery行:

<asp:GridView GridLines="None" ID="Abstract_GridView" runat="server" AutoGenerateColumns="False"
        CssClass="Grid" CellPadding="0">
        <Columns>
            <asp:TemplateField HeaderText="Select">
                <HeaderTemplate>
                    <asp:CheckBox ID="AllChk" runat="server" TabIndex="3" CssClass="smallCheckbox" />
                </HeaderTemplate>
                <ItemStyle HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:CheckBox ID="SelectChk" runat="server" TabIndex="5" CssClass="smallCheckbox" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HiddenField ID="EqpNo" runat="server" Value='<%# Bind("Equipmnt_No") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lbl" runat="server" Text='<%# Bind("Equipmnt_No") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

jQuery块:

 $(document).ready(function () {
        $('#<%=Abstract_GridView.ClientID %>').delegate('tr', 'click', function () {
            var SelectRowEqpNo = $(this).find("input[id*=EqpNo]").attr("value"); //trying to get the clicked row EqpNo
            $('#<%=Abstract_GridView.ClientID %> tr input[id*="EqpNo"]').each(function (i, v) {
                var Eachrw = $(this).val(); //getting each row EqpNo
                if (SelectRowEqpNo == Eachrw) { //Comparing both values if matching 
                    $(this).parents("tr").find('input[id*="SelectChk"]:checkbox').attr('checked', true);
                }
            });
        });
    });

基本上:找到所有者tr遍历DOM,然后找到再次遍历DOM的复选框。

希望这有帮助。