选中/取消选中asp复选框

carvr3hs  于 2023-01-22  发布在  .NET
关注(0)|答案(2)|浏览(184)

我想勾选和取消勾选几个ASP复选框,并伴有其他ASP复选框的事件。我想ID为“chkSelecAllGtias”的复选框可以勾选和取消勾选ID为“chkSelecionarGtia”的“GridView”复选框
这里我的ASP代码:

<div id="divGtiasLn" runat="server">
  <div class="formRow" id="tLineasG" style="padding:10px 20px 20px 20px">
      <label style="font-weight:bold">Título de la cabecera</label>

        <div class="BotonesOpcion AlineaDerecha">
            <div class="label">
                Seleccionar Todas
                <asp:CheckBox id='chkSelecAllGtias' runat='server'></asp:CheckBox>
            </div>
        </div> 

      <div style="width:100%;max-height:350px;overflow:auto">
          <asp:GridView ID="rgDatosGtias" runat="server" AutoGenerateColumns="false" EmptyDataText="No se encontraron" DataKeyNames="DataField1,DataField2,DataField3,DataField4" AlternatingRowStyle-BackColor="#DAE2E8">
              <Columns>
                  <asp:TemplateField HeaderText="Seleccionar">
                      <ItemTemplate>
                          <asp:CheckBox ID="chkSeleccionarGtia" runat="server" AutoPostBack="true" OnCheckedChanged="chkSeleccionarGtia_Check" />
                      </ItemTemplate>
                  </asp:TemplateField>
                  <asp:BoundField DataField="DataField1" HeaderText="Número1" />
                  <asp:BoundField DataField="DataField2" HeaderText="Número2" Visible="false" />
                  <asp:BoundField DataField="DataField3" HeaderText="Número3" />
                  <asp:BoundField DataField="DataField4" HeaderText="Número4" />
                  <asp:BoundField DataField="DataField5" HeaderText="Número5" />

                  <asp:BoundField DataField="DataField6" HeaderText="" Visible="false" />
                  <asp:BoundField DataField="DataField7" HeaderText="" Visible="false" />
                  <asp:BoundField DataField="DataField8" HeaderText="" Visible="false" />
              </Columns>
          </asp:GridView>
      </div>
   </div>                    
</div>

我的C#代码:

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        chkSelecAllGtias.Attributes.Add("OnClick", "SeleccionarTodasGtias();");
    }
    catch (Exception ex)
    {
        msjError.MostrarInfo(ex.InnerException.Message);
    }
}

我的JS代码:

function SeleccionarTodasGtias() {

            console.log("Dentro");

            $('#chkSeleccionarGtia').prop('checked', true);
            $('#chkSeleccionarGtia').prop('checked', false);

            $('#chkSelecAllGtias').prop('checked', true);
            $('#chkSelecAllGtias').prop('checked', false);

            //$('<=chkSelecAllGtias.ClientID%>').attr('checked', false);

            //var objState1 = $find("<%= chkSelecAllGtias.ClientID %>");

            console.log("objState1 -> " + objState1);
            if (document.getElementById('chkSelecAllGtias').checked == true) {
                document.getElementById('chkSeleccionarGtia').checked = true;
                alert("true");
            }
            else {
                document.getElementById('chkSeleccionarGtia').checked = false;
                alert("false");
            }
       }

我试过只用JS,但没有效果。
以及一些组合:

$("#Checkbox1").prop('checked', true); //// To check
$("#Checkbox1").prop('checked', false); //// To un check

但没有成功

kqlmhetl

kqlmhetl1#

function CheckAll() {
var chk = $(".chkall").prop("checked");
$("<checkbox name> input:checkbox").each(function (index, item) {
    $(item).prop("checked", chk);
}
);

}

tct7dpnv

tct7dpnv2#

你可以这样做(我的例子在底部有复选框,但没关系。
所以,这个:

<asp:CheckBox id='chkSelecAllGtias' runat='server'
    onclick="myheadcheck(this)" >
  </asp:CheckBox>

  <script> 

      function myheadcheck(btn) {

          // get the ONE check box, checked, or not???
          var bolChecked = $(btn).is(':checked')

          // now set all check boxes
          MyTable = $('#<%= grdEmp.ClientID %>')         // select and get grid
          MyCheckBoxs = MyTable.find('input:checkbox') // select all check boxes in grid
          MyCheckBoxs.each(function () {
              $(this).prop('checked', bolChecked)
          })
      }
  </script>

我没有你的数据,但是假设我有这个网格视图,然后有一个复选框。
所以,这个:

<h3>Select Hotels</h3>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table table-hover" width="50%">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
            <asp:BoundField DataField="LastName" HeaderText="LastName"  />
            <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
            <asp:BoundField DataField="City" HeaderText="City"  />
            <asp:BoundField DataField="Description" HeaderText="Description"  />

            <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:CheckBox ID="chkSel" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
  <asp:CheckBox ID="chkHeader" runat="server" Text="Select/unselect All" onclick="myheadcheck(this)" />
  <script> 

      function myheadcheck(btn) {

          // get the ONE check box, checked, or not???
          var bolChecked = $(btn).is(':checked')

          // now set all check boxes
          MyTable = $('#<%= GridView1.ClientID %>')     // select and get grid
          MyCheckBoxs = MyTable.find('input:checkbox') // select all check boxes in grid
          MyCheckBoxs.each(function () {
              $(this).prop('checked', bolChecked)
          })
      }
  </script>

要加载的代码如下所示:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadGrid();
    }
}
protected void LoadGrid()
{
    using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
    {
        string strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName";
        using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
        {
            DataTable rstData = new DataTable();
            conn.Open();
            rstData.Load(cmdSQL.ExecuteReader());
            GridView1.DataSource = rstData;
            GridView1.DataBind();
        }
    }
}

现在我们得到/看到这个:

相关问题