js 的checkbox 全选

最新推荐文章于 2019-06-15 14:31:12 发布

原创最新推荐文章于 2019-06-15 14:31:12 发布 · 674 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

标签

#input #button #asp #server #function

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>无标题页</title>

<script type="text/javascript">

// 说明：Javascript 控制 CheckBox 的全选与取消全选 // 整理：http://www.CodeBit.cn

function checkAll(name)

{

var el = document.getElementsByTagName('input');

var len = el.length;

for(var i=0; i<len; i++)

{

if((el[i].type=="checkbox") && (el[i].name==name))

{

el[i].checked = true;

}

}

}

function clearAll(name)

{

var el = document.getElementsByTagName('input');

var len = el.length;

for(var i=0; i<len; i++)

{

if((el[i].type=="checkbox") && (el[i].name==name))

{

el[i].checked = false;

}

}

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关

<input type="checkbox" name="test" value="a" /> a

<input type="checkbox" name="test" value="b" /> b

<input type="checkbox" name="test" value="c" /> c

<input type="checkbox" name="test" value="d" /> d

<input type="checkbox" name="test" value="e" /> e

<input type="checkbox" name="test" value="f" /> f

<input type="checkbox" name="test" value="g" /> g

<br />

<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关

<input type="checkbox" name="num" value="1" /> 1 <input type="checkbox" name="num" value="2" /> 2

<input type="checkbox" name="num" value="3" /> 3 <br />

<br />

<input type="button" value="选择所有的字母" onclick="checkAll('test')" />

<input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br />

<br />

<input type="button" value="选择所有的数字" onclick="checkAll('num')" />

<input type="button" value="清空选中的数字" onclick="clearAll('num')" />

<asp:CheckBox ID="CheckBox1" runat="server" /><br />

</div>

<div style="width: 100px; height: 100px">

<asp:GridView ID="GridView1" runat="server" Font-Size="10pt" Height="215px" Width="698px" DataKeyNames="id">

<Columns>

<asp:TemplateField>

<ItemTemplate>

<input id="ckOne" type="checkbox" name ="test" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="删除" /></div>

</form>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。