Gridview CheckBox 从外部复选框选中

Question

我在 Gridview 控件的外部使用父复选框，即
<asp:CheckBox ID="chkParent" runat="server" onclick="javascript:SelectAll();" />

如果我选中了这个 chkParent 复选框，请选中所有 Gridview chkChild 复选框

如果我取消选中此 chkParent 复选框，请取消选中所有 Gridview chkChild 复选框

在选中此chkParent 复选框后，Gridview 选中了所有chkChild 复选框，如果我取消选中 Gridview 控件中的至少 1 个 chkChild 复选框，我想取消选中 chkParent 复选框

   <asp:CheckBox ID="chkParent" runat="server" onclick="javascript:SelectAll();" />

        <asp:Gridview ID='gridSend' runat="server">
          <Columns>
           <asp:TemplateField>                     
            <ItemTemplate>
             <asp:CheckBox ID="chkChild" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          ------------
          ------------
          ------------
         </Columns>
        </asp:Gridview>

这是我的 JQuery 代码，我用来检查和取消选中它的工作是否正常，但如果我取消选中 Gridview 控件中的至少一个复选框，我想取消选中 chkParent 复选框

function SelectAll() {
        var row = $("#gridSent tr");
        if ($("#chkParent").prop("checked") == true) {
            for (var i = 0; i < row.length; i++) {
                var chkCell = row[i].cells[0];
                for (var j = 0; j < chkCell.childNodes.length; j++) {
                    if (chkCell.childNodes[j].type == "checkbox") {
                        chkCell.childNodes[j].checked = "true";
                    }
                }
            }
        }
        else {            
            for (var i = 0; i < row.length; i++) {              
                var chkCell = row[i].cells[0];
                for (var j = 0; j < chkCell.childNodes.length; j++) {                    
                    if (chkCell.childNodes[j].type == "checkbox") {
                        chkCell.childNodes[j].checked = false;
                    }
                }
            }
        }
    }

Answer 1

当然不是一个完整的解决方案，而只是一个想法，您以后如何自己解决问题。

<asp:CheckBox ID="chkParent" runat="server" OnCheckedChanged="ParentCheckedChanged" />

protected void ParentCheckedChanged(Object sender, EventArgs e) 
{
    // loop through child checkboxes and apply parent checkbox value
    foreach(GridViewRow row in GridView1.Rows) {
    if(row.RowType == DataControlRowType.DataRow) {
        CheckBox cb = row.FindControl("chkChild") as CheckBox;
        if (cb != null) cb.Checked = chkParent.Checked;
    }
}

<asp:CheckBox ID="chkChild" runat="server" OnCheckedChanged="ChildCheckedChanged" />
protected void ChildCheckedChanged(Object sender, EventArgs e) 
{
    CheckBox cbChild = sender as CheckBox;
    if (cbChild != null) {
         if(!cbChild.Checked){
             chkParent.Checked = false;
        }
    }
}

只是思考的食物。

Answer 2

运行代码段：

一些事情：

1. sn-p 中的表是一个渲染的 GridView。
2. <asp:CheckBox /> 通过将 <input type="checkbox" .../> 包装在 <span> 标记中来控制复杂化。
3. 因此，设置 <asp:CheckBox CssClass="sri" /> 会将类置于该范围内。
4. class="sri" 是一个空类，用于简化使用 jquery 选择器查找我们需要的复选框控件。

// jQuery Selectors
var cbxParent = "th span.sri input:checkbox";
var cbxChildren = "td span.sri input:checkbox";

// jQuery Objects
var $cbxParent = null;
var $cbxChildren = null;

// Other
var CountOfChildren = 0;


$(function() {

  $cbxParent = $(cbxParent);
  $cbxChildren = $(cbxChildren);

  CountOfChildren = $cbxChildren.length;

  ToggleCheck();
});


function ToggleCheck() {
  var CountOfCheckedChildren = 0;
  var IsParent = (event.target.id === $cbxParent[0].id);

  if (IsParent) 
  {
    // Parent was Checked, check or uncheck all children
    $cbxChildren.prop("checked", event.target.checked);
    CountOfCheckedChildren = $cbxChildren.filter(":checked").length;
  } 
  else 
  {
    CountOfCheckedChildren = $cbxChildren.filter(":checked").length;
    $cbxParent.prop("checked", (CountOfChildren === CountOfCheckedChildren));
  }

  var s = "[#:" + CountOfChildren + "] [X: " + CountOfCheckedChildren + "] [IsParent:" + IsParent + "]";
  $("caption").text(s);
}

th {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse; width:200px">
    <caption>
      Hello Sri
    </caption>
    <tr>
      <th scope="col">
        <span class="sri"><input id="GridView1_cbxParent" type="checkbox" name="GridView1$ctl01$cbxParent" onclick="ToggleCheck();" /></span>
      </th>
      <th scope="col">Amt</th>
    </tr>
    <tr>
      <td>
        <span class="sri"><input id="GridView1_cbxChild_0" type="checkbox" name="GridView1$ctl02$cbxChild" onclick="ToggleCheck();" /></span>
      </td>
      <td>
        <span id="GridView1_lblDue_0">1.25</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="sri"><input id="GridView1_cbxChild_1" type="checkbox" name="GridView1$ctl03$cbxChild" onclick="ToggleCheck();" /></span>
      </td>
      <td>
        <span id="GridView1_lblDue_1">2.5</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="sri"><input id="GridView1_cbxChild_2" type="checkbox" name="GridView1$ctl04$cbxChild" onclick="ToggleCheck();" /></span>
      </td>
      <td>
        <span id="GridView1_lblDue_2">3.5</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="sri"><input id="GridView1_cbxChild_3" type="checkbox" name="GridView1$ctl05$cbxChild" onclick="ToggleCheck();" /></span>
      </td>
      <td>
        <span id="GridView1_lblDue_3">4.5</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="sri"><input id="GridView1_cbxChild_4" type="checkbox" name="GridView1$ctl06$cbxChild" onclick="ToggleCheck();" /></span>
      </td>
      <td>
        <span id="GridView1_lblDue_4">5.5</span>
      </td>
    </tr>
  </table>
</div>