根據複選框字段在gridview中對行進行操作

Question

我有一個GridView，其中第一個字段是複選框。我想根據複選框的狀態採取行動客戶端（顯示或隱藏行）。

感謝my previous StOf posting，我有一個RadioButtonList正確地發射我的Javascript。現在需要獲取對相應行的引用。

我一直依靠幾個問題和答案，建立我當前的Javascript：

$(function() { 
    $("#RadioButtonList1 input[id^=Radio]").click(function() { 
     var grd = $("#my_gridview"); 
     var rows = $("#my_gridview tr:gt(0)"); 

     switch (this.value) { 
      case "All": 
       { 
        $("#my_gridview tr").show(); 
       } 

      case "HideRequested": 
       { 
        var rowToShow = rows.find("td:eq(0)").filter(checked != "checked"); 
        rows.show().not(rowToShow).hide(); 
       } 

      case "ShowRequested": 
       { 
        var rowToShow = rows.find("td:eq(0)").filter(checked == "checked"); 
        rows.show().not(rowToShow).hide(); 
       } 

     } 
    }) 
}); 

但是當我運行這一點，我在JS控制檯得到一個錯誤：的ReferenceError：檢查沒有定義。這很奇怪，因爲它適用於其他問題，並且生成的HTML（在控制檯中確認）包含input元素中的checked屬性。的HTML是：

<table cellspacing="0" cellpadding="2" id="gv_grid" style="border-color:Black;border-width:1px;border-style:None;width:100%;border-collapse:collapse;"> 
    <tr class="grGridViewHeader" style="white-space:nowrap;"> 
     <th align="center" scope="col" style="width:100px;white-space:nowrap;">Select Entry</th><th scope="col">Entry Name</th><th align="left" scope="col">Type</th><th align="left" scope="col">Details</th> 
    </tr><tr valign="top" style="background-color:#BED3FC;border-style:None;"> 
     <td align="center" valign="middle" style="white-space:nowrap;"> 
         <input id="gv_grid_chk_selected_0" type="checkbox" name="gv_grid$ctl02$chk_selected" checked="checked" /> 
        </td><td>Entry 1</td><td style="font-size:Small;">Foo</td><td style="font-size:Small;">Assorted text.</td> 
    </tr><tr valign="top" style="background-color:White;border-style:None;"> 
     <td align="center" valign="middle" style="white-space:nowrap;"> 
         <input id="gv_grid_chk_selected_1" type="checkbox" name="gv_grid$ctl03$chk_selected" checked="checked" /> 
        </td><td>Entry 2</td><td style="font-size:Small;">Bar</td><td style="font-size:Small;">Assorted text.</td> 
    </tr><tr valign="top" style="background-color:#BED3FC;border-style:None;"> 
     <td align="center" valign="middle" style="white-space:nowrap;"> 
         <input id="gv_grid_chk_selected_2" type="checkbox" name="gv_grid$ctl04$chk_selected" checked="checked" /> 
        </td><td>Entry 3</td><td style="font-size:Small;">Baz</td><td style="font-size:Small;">Assorted text.<br /></td> 
    </tr> 
</table> 

我也曾嘗試：

var checkboxArray = $('#my_gridview td input:checkbox'); 

其中確實產生複選框元素的數組，但我仍然不知道如何正確地過濾了checked財產，也不如何回到治理tr元素。

來源：

https://stackoverflow.com/a/6013026/2615836

https://stackoverflow.com/a/6068768/2615836

Answer 1

在這裏你去... http://jsfiddle.net/tdyhq8z7/2/

$(function() { 
    $("#RadioButtonList1 :radio").click(function() { 
     var $rows = $("#gv_grid tr:gt(0)").show(); 
     switch (this.value) { 
      case "HideRequested": 
       $rows.filter(function(){ 
        return $('td:first>:checkbox',this).is(":checked") 
       }).hide(); 
       break; 
      case "ShowRequested": 
       $rows.filter(function(){ 
        return !$('td:first>:checkbox',this).is(":checked") 
       }).hide(); 
       break; 
     } 
    }) 
}); 

//another solution: 
$(function() { 
    $("#RadioButtonList1 :radio").click(function() { 
     var $rows = $("#gv_grid tr:gt(0)").show(), $val=this.value; 
     if(this.value != "All"){ 
      $rows.filter(function(){ 
       var $checked = $('td:first>:checkbox',this).is(":checked"); 
       if($val == "HideRequested") return $checked; 
       else if($val == "ShowRequested") return !$checked; 
      }).hide(); 
     } 
    }) 
});