如何使用Jquery只檢查gridview的幾個複選框？

Question

我有一個網格，幾列

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

我在檢查幾個複選框面臨的問題together.I有一列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);    
} 
    }); 
}); 

Answer 1

嘗試：

$('#<%=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);    
    } 
    }); 
}); 

Answer 2

我想補充的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，代碼很小，可以很容易地放入外部類

Answer 3

這是整個代碼的工作。我HUST改變了​​jQuery的行中的if塊：

<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下來再次。

希望這會有所幫助。