Question

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

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

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

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

< / p>

   <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代码，但我想取消选中chkParent Checkbox，如果我取消选中Gridview Control中的至少一个复选框

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

运行代码段：

一些事情：

代码段中的表格是一个渲染的GridView。
<asp:CheckBox />通过将<input type="checkbox" .../>包裹在<span>标记中来控制问题。
因此，设置<asp:CheckBox CssClass="sri" />将该课程放在该范围内。
class="sri"是一个空类，用于简化使用jquery选择器查找我们需要的复选框控件。

＆＃13;

// 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);
}

＆＃13;

th {
  text-align: left;
}

＆＃13;

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

＆＃13;

Gridview CheckBox从外部复选框检查

2 个答案: