求。net 使用的前台javascript代码，实现全选功能的
如题。想在前台加一个javascript实现复选框的单选全选和取消全选的功能。在网上搜索了很多，都只是全选和不全选的，要么就运行不起来。感觉很悲催。。。求一段全的代码：实现如下功能
1,点击标题栏上的那个复选框实现全选和全部选
2，当下面的单选按钮都点上则上面的全选checkbox也自动选上，反之，若有一个点击取消则上面的复选框按钮也不点上（注：不是所谓的反选）
求大神指点。要javascript 代码。不要后台的，后台每次都要刷新页面很烦。。。。越详细越好，O(∩_∩)O谢谢！ javascript? .net 全选 复选框
[解决办法]
前台JS框架请使用EasyUI,网址： http://www.jeasyui.com/
[解决办法]
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="viewTable">
<tr class="trOperation">
<th width="5%" style="height: 20px">
<asp:CheckBox runat="server" ID="checkBoxAll" Title="全选" />
</th>
<th width="8%">
<b>账户类型名称</b>
</th>
<th width="5%">
<b>是否返点</b>
</th>
<th width="10%">
<b>是否检查有效期</b>
</th>
<th width="8%">
<b>是否可充值</b>
</th>
<th width="8%">
<b>是否允许记名</b>
</th>
<th width="8%">
<b>是否可补卡</b>
</th>
<th width="8%">
<b>创建人员</b>
</th>
<th width="10%">
<b>创建时间</b>
</th>
<th width="15%">
<b>备注信息</b>
</th>
<th width="18%">
<b>操作</b>
</th>
</tr>
<asp:Repeater ID="repList" runat="server">
<ItemTemplate>
<tr id="tr<%# Eval("AccountTypeID") %>" class="DataAlign">
<td>
<asp:CheckBox runat="server" class="itemSelect" ID="checkItem" />
<asp:Label ID="labelItem" runat="server" Text='<%# Eval("AccountTypeID") %>' Visible="false"></asp:Label>
</td>
<td width="8%">
<%# Eval("Name")%>
</td>
<td width="5%">
<%# ((bool)Eval("IsRebate"))?"返点":"不返点"%>
</td>
<td width="10%">
<%# ((bool)Eval("IsCheckExpiredTime")) ? "检查有效时间" : "不检查有效时间"%>
</td>
<td width="8%">
<%# ((bool)Eval("IsRechargeable")) ? "可充值" : "不可充值"%>
</td>
<td width="8%">
<%# ((bool)Eval("IsAnonymous")) ? "否" : "是"%>
</td>
<td width="8%">
<%# ((bool)Eval("IsUpCard")) ? "可补卡" : "不可补卡"%>
</td>
<td width="8%">
<%# Eval("UserName")%>
</td>
<td width="8%">
<%# Eval("CreateTime").ToString()%>
</td>
<td width="15%">
<%# Eval("Remark").ToString().Length > 20 ? (Eval("Remark").ToString().Substring(0, 20) + "...") : Eval("Remark").ToString()%>
</td>
<td width="18%">
<a href="../Accounts/AccountTypeListCard.aspx?AccountTypeID=<%# Eval("AccountTypeID") %>">
查看及修改</a>
<br />
<a href="../Accounts/AccountTypeAffiliatedCard.aspx?AccountTypeID=<%# Eval("AccountTypeID") %>">
查看附属类型</a>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
<tr class="Operation">
<td colspan="4" align="left">
<img src="../Images/newSys/index_21.jpg" alt="求。net 施用的前台javascript代码，实现全选功能的" />
共<b><%=AspNetPager1.RecordCount %></b>条（<b><%=AspNetPager1.PageCount %></b>页），每页显示
<asp:TextBox ID="txtPaging" runat="server" Width="21" MaxLength="2" OnTextChanged="txtPaging_TextChanged"
AutoPostBack="true"></asp:TextBox>
条
</td>
<td colspan="5" style="text-align: center">
<webdiyer:AspNetPager ID="AspNetPager1" runat="server" PageSize="10" AlwaysShow="true"
FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" ShowInputBox="Never"
OnPageChanged="AspNetPager1_PageChanged" NavigationButtonType="Image" ImagePath="../Images/newSys/"
ShowPageIndexBox="Never" ButtonImageExtension=".jpg" ButtonImageNameExtension="j"
SubmitButtonStyle="" LayoutType="Div">
</webdiyer:AspNetPager>
</td>
<td colspan="2" style="text-align: right">
<div style="text-align: right">
<div style="float: right;">
<asp:ImageButton ID="btnGo" runat="server" ImageUrl="../Images/newSys/go.jpg" OnClick="btnGo_Click" />
</div>
<div style="float: right; padding-top: 6px">
跳转到<asp:TextBox ID="txtPage" runat="server" Height="14px" Width="20px"></asp:TextBox>页
</div>
</div>
</td>
</tr>
</table>
$(function () {
//chickBox控制
$('#checkBoxAll').click(function () {
if ($(this).attr('checked') == "checked") {
$('.itemSelect input').each(function () {
$(this).attr('checked', true);
});
}
else {
$('.itemSelect input').each(function () {
$(this).removeAttr('checked');
});
}
});
});
if (inputObj[i].type == "checkbox") {
if ($("AllSelect").checked == true) {
inputObj[i].checked = true;
}
else {
inputObj[i].checked = false;
}
}
}
}
[解决办法]
不用 jquery 的话，可以为每个 checkbox 加一个 name 属性，使用同一个全选 checkbox 控制的有相同的name。然后：
// controlId 为 全选控制 checkbox ID，name 为被控制的 checkbox 的 name 属性值
function selectAll(controlId, name) {
var controlElm = document.getElementById(controlId);
var cbs = document.getElementsByName(name);
controlElm.onclick = function() {
var checkResult = this.checked;
for(var i = 0, len = cbs.length; i < len; ++i) {
cbs[i].checked = checkResult;
}
}
for(var i = 0, len = cbs.length; i < len; ++i) {
cbs[i].onclick = function() {
if(!this.checked)
controlElm.checked = false;
else {
// 判断是否所有相关的 checkbox 已勾选上，若全部勾选，则勾选 controlElm
for(var j = 0, l = cbs.length; j < l; ++j) {
if(!cbs[j].checked)
return;
}
controlElm.checked = true;
}
}
}
}
<html>
<head>
<title>JavaScript实现全选和反全选-
<script type="text/javascript">
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;
}
}
}
function checkIsAllSelect(name)
{
var el = document.getElementsByTagName('input');
var len = el.length;
var isAllSelect = true ;
for(var i=0; i<len; i++) {
if((el[i].type=="checkbox") && (el[i].name==name)) {
if( el[i].checked == false ) { isAllSelect = false ; }
}
}
if( isAllSelect == true )
document.getElementById('test1').checked = true ;
else
document.getElementById('test1').checked = false ;
}
</script>
</head>
<body>
<input type="checkbox" name="test1" id="test1" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 全选开关
<input type="checkbox" name="test" value="a" onclick="checkIsAllSelect('test')" /> a
<input type="checkbox" name="test" value="b" onclick="checkIsAllSelect('test')"/> b
<input type="checkbox" name="test" value="c" onclick="checkIsAllSelect('test')"/> c
<input type="checkbox" name="test" value="d" onclick="checkIsAllSelect('test')"/> d
</body>
</html>
<tr onmouseover="listmouseover(this,'');" onmouseout="listmouseout(this,'');">
<td class="p_col2" style="height:80px;">
[单行选项]
<input type="checkbox" name="News" value="<%# Eval("News_GUID") %>" id="_News_<%# Eval("News_GUID") %>" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
juery的处理
<script type="text/javascript" language="javascript">
function selectALLOrClearALL() {
$("input[name='" + arguments[0] + "']").attr("checked", arguments[1]);
}
</script>
处理起来很简单的，没那么复杂，
这是我写的一个新闻的全选和反选 楼主可以测试下，
有什么问题？在回复说名，
[解决办法]
var items = document.getElementsByTagName("input");
//复选框全选/全不选
function SelectAll(con) {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].id != "chkSelectAll") {
items[i].checked = con.checked;
}
}
}
//取消全选
function UnSelectAll() {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].id != "chkSelectAll") {
document.all.chkSelectAll.checked = items[i].checked;
if (!document.all.chkSelectAll.checked)
break;
}
}
}
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input id="chkSelectAll" type="checkbox" onclick="SelectAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<input id="chkSelect" type="checkbox" onclick="UnSelectAll();" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
序号
</HeaderTemplate>
<ItemTemplate>
<input id="chkSelect" value='<%# Eval("FileCode") %>' type="text" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
DataTable dt = new DataTable();
dt.Columns.Add("FileCode", typeof(int));
dt.Rows.Add(1);
dt.Rows.Add(2);
dt.Rows.Add(3);
dt.Rows.Add(4);
dt.Rows.Add(5);
GridView1.DataSource = dt;
GridView1.DataBind();