實現checkboxlist的全選
第一種:利用客戶端控制元件實現
JS:
<script type="text/javascript">
function checkAll()
{
var checklist=document.getElementsByTagName("input");
for(var i=0;i<checklist.length;i++)
{
if(checklist[i].type=="checkbox")
{
checklist[i].checked=document.form1.ck.checked;
}
}
}
</script>GridView控制元件:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="產品編號" />
<asp:TemplateField>
<HeaderTemplate>
<input id="ck" type="checkbox" onclick="checkAll();" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="checkbox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>第二種:利用伺服器端控制元件實現
複製程式碼 程式碼如下:
protected void 全選_CheckedChanged(object sender, EventArgs e)
{
if (全選.Checked == true)
{
for (int i = 0; i < GridView1.Rows.Count; i++)
{
CheckBox ck = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("checkbox1") as CheckBox;
if (ck!=null)
{
ck.Checked = true;
}
}
}
else
{
for (int i = 0; i < GridView1.Rows.Count; i++)
{
CheckBox ck = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("checkbox1") as CheckBox;
if (ck != null)
{
ck.Checked = false;
}
}
}
}或者,你可以像這樣來做:
<html> <head><title></title></head> <body> <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" onclick="checkAll('chkAll',this);" /> <input type="checkbox" name="chkSelect" onclick="checkAll('chkAll',this);" /> <input type="checkbox" name="chkSelect" onclick="checkAll('chkAll',this);" /> <input type="checkbox" name="chkSelect" onclick="checkAll('chkAll',this);" /> <input type="checkbox" name="chkSelect" onclick="checkAll('chkAll',this);" /> <input type="checkbox" name="chkSelect" onclick="checkAll('chkAll',this);" /> <script type="text/javascript"> function checkAll(chkAllID,thisObj) { var chkAll = document.getElementById(chkAllID); var chks = document.getElementsByTagName("input"); var chkNo = 0; var selectNo = 0; for(var i =0; i < chks.length; i++) { if(chks[i].type == "checkbox") { //全選觸發事件 if(chkAll == thisObj) { chks[i].checked = thisObj.checked; } //非全選觸發 else { if(chks[i].checked && chks[i].id != chkAllID) selectNo++; } if(chks[i].id != chkAllID) { chkNo++; } } } if(chkAll != thisObj) { chkAll.checked = chkNo==selectNo; } } </script> </body> </html>
相關文章
- JS_多選框全選與取消全選的實現JS
- vue checkbox 實現全選,取消全選Vue
- JavaScript實現單擊全選 ,再次點選取消全選JavaScript
- React實現全選和反選React
- 用javascript實現全選/反選元件JavaScript元件
- js中checkbox的全選和反選的實現JS
- jQuery 實現checkBox全選效果jQuery
- JS實現核取方塊全選反選JS
- Jquery實現頁面的新增、刪除、全選、取消全選、漸變色jQuery
- Android列表實現單選、多選、全選、取消、刪除Android
- 原生js實現的核取方塊的全選和全不選效果JS
- jquery中attr和prop的區別+jquery實現全選全不選jQuery
- jquery實現的全選和刪除功能外掛jQuery
- jQuery如何實現核取方塊全選和全不選jQuery
- Javascript得到CheckBoxList的ValueJavaScript
- 如何使用jQuery實現核取方塊的全選和取消jQuery
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- vue 工作專案中 實現訊息列表的 全選,反選,刪除功能Vue
- checkboxList operate in windows fromWindows
- javascript實現 checkbox全選和批量刪除功能JavaScript
- jquery實現checkbox核取方塊全選效果jQuery
- avalon繫結實現checkbox全選簡單介紹
- JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇JS陣列
- javascript實現核取方塊全選和取消程式碼分析JavaScript
- Java實現-全排列Java
- 實現購物車 全選全不選,反選,單選-選滿時同步全選核取方塊--核取方塊checked屬性取值問題已解決
- js checkbox 全選 取消全選JS
- Flink全量快照的實現
- 實現自然數N的全排列
- 多選操作的實現
- 簡單的js反選,全選,全不選JS
- CheckBoxList擴充套件方法程式碼套件
- 字串全排列 java實現字串Java
- 全排列演算法的JS實現演算法JS
- 【xh&hhh】ASP.NET2.0下利用javascript實現TreeView中的checkbox全選!ASP.NETJavaScriptView
- 30選7機選實現
- 選單中的命令的實現
- ALV程式checkbox全選及取消全選