[英]c# - javascript - checkbox checkall() function
我一直在嘗試實現checkAll()函數,以便選擇/取消選擇網格內的所有復選框。 我擁有的網格就是這個網格:
<table style="width: 100%;">
<tr>
<td>
<input type="checkbox" id="chkImprimir" runat="server" enableviewstate="true" onclick="CheckAll()" />
<asp:Label ID="SeleccionarLabel" runat="server" meta:resourceKey="SeleccionarLabel"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
<asp:ImageButton ID="ImageButtonDownloadXLS" ToolTip="ImageButtonDownloadXLS" ImageUrl="SiteImages/toolbar/xls.gif"
onmouseover="this.src='SiteImages/toolbar/xls_hover.gif';" onmouseout="this.src='SiteImages/toolbar/xls.gif';" runat="server" meta:resourcekey="ImageButtonDownloadXLS"
Style="float: right;" OnClick="ImageButtonDownloadXLS_Click" />
<asp:Button ID="btnAddOfertasDetalle" runat="server" CausesValidation="False" meta:resourceKey="btnAddOfertasDetalle"
OnClientClick="javascript:AddOfertasDetalle()" Text="Afegir OfertaDetalle" />
</td>
</tr>
<tr>
<td id="Td2" runat="server" class="generalContent">
<ComponentArt:Grid ID="GridOfertasDetalle" runat="server" AllowEditing="true" CssClass="Grid"
EditOnClickSelectedItem="false" EnableViewState="true" FooterCssClass="GridFooter"
Height="350" ImagesBaseUrl="images/" KeyboardEnabled="false" LoadingPanelClientTemplateId="LoadingFeedbackTemplate"
LoadingPanelPosition="MiddleCenter" PagerStyle="Numbered" PagerTextCssClass="PagerText"
PageSize="15" RunningMode="Client" ShowHeader="False" Width="730" AllowHorizontalScrolling="True">
<Levels>
<ComponentArt:GridLevel DataCellCssClass="DataCell" DataKeyField="Id" EditCellCssClass="EditDataCell"
HeadingCellCssClass="HeadingCell" HeadingRowCssClass="HeadingRow" HeadingSelectorCellCssClass="SelectorCell"
HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow"
RowCssClass="Row" ShowTableHeading="false" SortAscendingImageUrl="asc.gif"
SortDescendingImageUrl="desc.gif" SortImageHeight="10" SortImageWidth="10">
<Columns>
<ComponentArt:GridColumn AllowEditing="True" Width="15" ColumnType="CheckBox" Align="Center" />
<ComponentArt:GridColumn DataField="Id"/>
</Columns>
</ComponentArt:GridLevel>
</Levels>
</table>
然后,我嘗試了幾種方法來實現checkAll()函數:
function CheckAll() {
var grid = GetGrid();
var check = document.getElementById('<%=chkImprimir.ClientID%>').checked;
grid.beginUpdate();
var gridItem;
var itemIndex = 0;
while (gridItem = GetGrid().get_table().GetRow(itemIndex)) {
gridItem.setValue(0, check, false);
itemIndex++;
}
grid.endUpdate();
grid.Render();
}
function GetGrid()
{
return <%= GridOfertasDetalle.ClientObjectId %>;
}
我也嘗試過:
function CheckAll() {
var grid = GetGrid();
var check = document.getElementById('<%=chkImprimir.ClientID%>').checked;
grid.beginUpdate();
var gridItem;
var itemIndex = 0;
while (gridItem = GetGrid().Table.GetRow(itemIndex)) { //<-- change to Table
gridItem.setValue(0, check); //<-- tried with and without the (x, x, FALSE)
itemIndex++;
}
grid.endUpdate();
grid.Render(); // <-- tried with and without Render
}
function GetGrid()
{
return <%= GridOfertasDetalle.ClientObjectId %>;
}
這是一個jQuery解決方案。
一個ID為CheckAll
復選框,以及在帶有類wrapper
的元素內要選中或取消選中的所有復選框。
$('#CheckAll').click(function () {
if (this.checked) {
$('.wrapper input[type=checkbox]').each(function () {
if (!this.checked) {
$(this).trigger('click');
}
});
}
else {
$('.wrapper input[type=checkbox]').each(function () {
if (this.checked) {
$(this).trigger('click');
}
});
}
});
使用jQuery函數trigger
而不是將屬性設置為checked
將允許綁定到所述復選框的任何JavaScript事件的正常功能。
例如,如果您的GridOfertasDetalle.ClientObjectId
為offersTable
,請嘗試使用JQuery
function checkUncheckAll() {
var offersTable = $('#offersTable');
var allCheckBox = $('input[type=checkbox]', offersTable);
var allCheckBoxChecked = $('input[type=checkbox]:checked', offersTable);
if (allCheckBox.length == allCheckBoxChecked.length) //if all are checked
{
allCheckBox.removeAttr('checked'); //uncheck all
}
else allCheckBox.attr('checked', 'checked'); //check all
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.