单击按钮以选中GridView中的全部复选框 [英] Click button to Check all checkbox in GridView

问题描述

点击检查按钮后，gridview中的所有复选框都会选中/取消选中，但我的代码只检查/取消选中第一行。下面是我的代码：



//检查所有/未选中的所有按钮

 <   a     href   =' ＃'   >  @ Html.Raw（<   img     src   =' < span class =code-keyword> / images / selectall.gif'    title  < span class =code-keyword> ='  Sel>等所有'  /  < span class =code-keyword>> ）<   / a  < span class =code -keyword>>  
 <   a     href   ='  ＃'   >  @ Html.Raw（<   img     src   ='  / images / deselectall.gif'    title   =' 取消全选'  /  > ）<   / a  >  

// GridView

 @ {var grid = new WebGrid（Model，canPage：true，rowsPerPage：50，selectionFieldName：selectedRow，ajaxUpdateContainerId：gridContent）; grid.Pager（WebGridPagerModes.NextPrevious）; 
< div id =gridContentclass =articleHeader article_lst> 
 @ grid.GetHtml（tableStyle：webGrid，
 headerStyle：，
 alternatingRowStyle：alt，
 selectedRowStyle：select，
列： grid.Columns（
 grid.Column（，style：col3，format：@< text>< input id =chkSelectedclass =display-modename =selecttype = checkboxvalue =@ item.Value.AdditionalItemID/>< / text>），
 grid.Column（项目名称，样式：col2，格式：@< text>< ; span id =AdditionalItemNameclass =display-mode> @ item.AdditionalItemName< / span> @ Html.TextBox（AdditionalItemName-Edit，（string）item.AdditionalItemName，new {@class =edit- mode}）< / text>），
 grid.Column（Description，style：col2，格式：@< text>< span id =AdditionalItemDescriptionclass =display-mode > @ item.AdditionalItemDescription< / span> @ Html.TextBox（AdditionalItemDescription-Edit，（string）item.AdditionalItemDescription，new {@class =edit-mode}）< / text> ;），
 grid.Column（Is Active，样式：col3，格式：@< text> @ {bool isActive = Convert.ToBoolean（item.IsActive）;< span id =IsActive class =display-mode> @ Convert.ToBoolean（item.IsActive）< / span> @ Html.CheckBox（IsActive-Edit，isActive，new {@class =edit-mode}）} < / text>），
 grid.Column（，style：col1，格式：@< text>< div style =padding-left：20px;> 
< a href ='＃'class =btn_grid edit-item display-modeid =@ item.AdditionalItemID> @ Html.Raw（< img src ='/ images / edit- icon.png'title ='编辑'/>）< / a> 
< a href ='＃'class =btn_grid display-mode delete-itemid =@ item.AdditionalItemID> @ Html.Raw（< img src ='/ images / delete icon .png'title ='删除'/>）< / a> 
< a href ='＃'class =btn_grid save-item edit-modeid =@ item.AdditionalItemID> Save< / a> 
< a href ='＃'class =btn_grid cancel-item edit-modeid =@ item.AdditionalItemID>取消< / a>< / div>< / text>）） ）
< / div> 
} 

// JQuery

  function  check（）{
  document  .getElementById（  chkSelected）。checked =  true ; 
} 
 
  function  uncheck（）{
  document  .getElementById（  chkSelected）。checked =  false ; 
} 

我不知道我错过了哪里。请帮我解决这个问题。

解决方案

使用Jquery检查所有复选框

（ ＃btnSelectAll）。live（ 点击， function （）{

（' ＃gridID'）。find（ input：checkbox）。each（ function （）{
此 .checked = true ;
}）;
}）;

Once click Check button, all checkbox in gridview will checked/unchecked but my code only check/uncheck the first row only. Below is my code:

//check all/unchecked all button

<a href='#' >@Html.Raw("<img src='/images/selectall.gif' title='Sel>ect All'/>")</a>
<a href='#' >@Html.Raw("<img src='/images/deselectall.gif' title='Unselect All'/>")</a>

//GridView

@{ var grid = new WebGrid(Model, canPage: true, rowsPerPage: 50, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent"); grid.Pager(WebGridPagerModes.NextPrevious);
<div id="gridContent" class="articleHeader article_lst">
@grid.GetHtml(tableStyle: "webGrid",
	      headerStyle: "",
	      alternatingRowStyle: "alt",
	      selectedRowStyle: "select",
	      columns: grid.Columns(
	      grid.Column("", style: "col3", format: @<text><input id="chkSelected" class="display-mode" name="select" type="checkbox" value="@item.Value.AdditionalItemID" /></text>),
            grid.Column("Item Name", style: "col2", format: @<text><span id="AdditionalItemName" class="display-mode">@item.AdditionalItemName</span> @Html.TextBox("AdditionalItemName-Edit", (string)item.AdditionalItemName, new { @class = "edit-mode" })</text>),
            grid.Column("Description", style: "col2", format: @<text><span id="AdditionalItemDescription" class="display-mode">@item.AdditionalItemDescription</span>						@Html.TextBox("AdditionalItemDescription-Edit",(string)item.AdditionalItemDescription, new { @class = "edit-mode" })</text>),
            grid.Column("Is Active", style: "col3", format: @<text>@{bool isActive = Convert.ToBoolean(item.IsActive);<span id="IsActive" class="display-mode">@Convert.ToBoolean(item.IsActive)</span>@Html.CheckBox("IsActive-Edit", isActive, new { @class = "edit-mode" })}</text>),
           grid.Column("", style: "col1", format: @<text><div style="padding-left:20px;">
           <a href='#' class="btn_grid edit-item display-mode" id="@item.AdditionalItemID">@Html.Raw("<img src='/images/edit-icon.png' title='Edit'/>")</a>
           <a href='#' class="btn_grid display-mode delete-item" id="@item.AdditionalItemID">@Html.Raw("<img src='/images/delete icon.png' title='Delete'/>")</a>
	  <a href='#' class="btn_grid save-item edit-mode" id="@item.AdditionalItemID">Save</a>
	  <a href='#' class="btn_grid cancel-item edit-mode" id="@item.AdditionalItemID">Cancel</a></div></text>)))
</div>
}

//JQuery

function check() {
	    document.getElementById("chkSelected").checked = true;
	}

	function uncheck() {
		document.getElementById("chkSelected").checked = false;
	}

I don't know where I miss out. Please help me to solve this problem.

解决方案

Use Jquery to check all checkboxes

("#btnSelectAll").live("click", function () {

('#gridID').find("input:checkbox").each(function () { this.checked = true; }); });

这篇关于单击按钮以选中GridView中的全部复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！