读书人
栏目▼

求。net 施用的前台javascript代码实

发布时间： 2013-01-11 11:57:35 作者： rapoo

求。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');
                    });
                }
            });

        });

[解决办法]
var table = document.getElementById("list");
var checkes = table.getElementsByTagName("input");
var isHasChecked = false;
for (var i = 0; i < checkes.length; i++) {
if (checkes[i].type == "checkbox" && checkes[i].checked == true) {
isHasChecked = true;
}
}
你自己放到一个js函数里
[解决办法]
function CheckAllOpt() {
var inputObj = document.getElementsByTagName("input");

for (var i = 0; i < inputObj.length; i++) {


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>

[解决办法]
引用:
引用:楼主还没有解决掉?


我放弃了，还是写在后台了。之前在前台写的很简单就能实现全选和全部选功能的，但是下面的选上后不好实现对全选按钮的操作。可能是因为和我那个假分页有关系。后来我改了几个版本，越改越乱，已经木有信心了。等我闲下来的时候再看看

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="P_table">
<tr>
<td width="30" class="p_col">
[全选\反选]
<input type="checkbox" value="checkbox" title="全选/反选" id="check" onclick="selectALLOrClearALL('News',this.checked);" /></td>
<td class="p_col_l">
标题</td>
</tr>
<asp:Repeater ID="NewsGrouplist" runat="server">
<ItemTemplate>


<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>
处理起来很简单的，没那么复杂，
这是我写的一个新闻的全选和反选 楼主可以测试下，
有什么问题？在回复说名，
[解决办法]

引用:
XML/HTML code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091……
个人觉得这个最简洁
[解决办法]
// 全选checkbox(name = 'chkAll')的事件
function SelectAll() {
$('input[name$="chkSingle"]').
attr("checked",$('input[name$="chkAll"]').attr("checked"));
}

// 其他checkbox(name = 'chkSingle')的事件
function SelectSingle(obj) {
if ($(obj).attr("checked") == false) {
$('input[name$="chkAll"]').attr("checked", false);
} else {
if ($('input[name$="chkSingle"]').length ==$('input[name$="chkSingle"]:checked').length) {
$('input[name$="chkAll"]').attr("checked", true);
}
}
}
------解决方案--------------------


Reference from #27，增加取消全选

        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();

读书人网 >asp.net

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net