Question

我的gridview中的第一列（gvAvailable）是当前复选框列“chkSelect”。它现在的工作方式是用户可以检查gridview上的多个复选框，但我想要一个jquery函数来取消选择gridview上的所有复选框，除了单击的复选框。

我也在寻找一种方法，通过单击按钮来使用jquery访问已检查行的列。

感谢您的帮助

以下是生成的html的外观

<table class="Grid" cellspacing="0" border="0" id="gvAvailable" style="width:99%;border-collapse:collapse;">
<tr class="GridHeader">
<th scope="col">&nbsp;</th><th scope="col">Guid</th><th scope="col">Id</th><th scope="col">Name</th>
    <th scope="col">Facility</th><th scope="col">Room</th>
</tr>
<tr class="GridItem">
    <td>
        <input id="gvAvailable_ctl02_chkSelect" type="checkbox" name="gvAvailable$ctl02$chkSelect" />
    </td>
    <td>24</td>
    <td>000101020201</td>
     <td>Test</td>
     <td>Test Facility</td>
     <td>&nbsp;</td>
</tr><tr class="GridAltItem">
<td>
    <input id="gvAvailable_ctl03_chkSelect" type="checkbox" name="gvAvailable$ctl03$chkSelect" />
</td>
<td>25</td>
<td>1001</td>
<td>Test 2</td>
<td>Test 3</td>
<td>&nbsp;</td>
</tr>
</table>

Answer 1

如果将相同的类添加到标记中的每个复选框，则可以通过说

来检索它们的数组。

$('.classname')

这将返回对象数组。然后，您可以在阵列上调用“each”并取消全部选择。

function removeChecks()
{    
    $('.classname').each(function()
    {
         $(this).removeAttr('checked');
    });
}

然后在每个复选框的单击处理程序中添加上述函数调用：

$('.classname').each(function()
{
    $(this).click(function()
    {
        removeChecks();
        $(this).attr('checked', 'checked');
    });
});

上面的代码应该设置为在页面加载时运行。

Answer 2

在这个例子中，我放了一个按钮来检查，一个按钮取消选中gridview复选框：

<asp:GridView runat="server" ID="grid"></asp:GridView>

<input type="button" onclick="uncheckCheckBoxes()" value="UnCheck" />
&nbsp;
<input type="button" onclick="checkCheckBoxes()" value="Check" />

<script>
    function uncheckCheckBoxes()
    {
        var gridClientID = '<%= grid.ClientID %>';
        jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
        {
          this.checked = false;
        });
    }

    function checkCheckBoxes()
    {
        var gridClientID = '<%= grid.ClientID %>';
        jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
        {
          this.checked = true;
        });
    }
</script>

Answer 3

我假设您要确保用户点击的复选框不会被切换？如果是这样，请继续下面。

首先，只需为gridview中的所有复选框命名。

每当单击一个复选框时，向其添加另一个类以表示它是物理选择的。

$('.checkbox').click(function(){
   $(this).addClass('checked');
});

现在，当用户点击顶部的全选复选框（让我们称之为“selectAll”）时，遍历所有复选框并在检查“已检查”类时切换状态

$('#selectAll').click(function(){
   var status = $(this).attr('checked')
   $('.checkbox').each(function(){
      //only toggle if not set
      if(!$(this).hasClass('checked')){
        if(status){
          $(this).attr('checked', 'checked');
        }
        else{
          $(this).attr('checked', '');
        }
      }
    });
});

这应该会让你顺利地走上你的欢乐之路。

现在，访问已检查行的列？

You could add an onclick event to each table row.
$('#tablename tr').click(function(){
  //do something
});

Answer 4

我发现this非常有用了使用jQuery检查/取消选中ASP.NET CheckBox列表中的所有项目

Jquery函数用于gridview上的操作和复选框

4 个答案: