兩個DataList嵌套下的CheckBox，如何用js無刷新實現全選、反選、全不選？

[peng_yaoming]

兩個DataList嵌套下的CheckBox，如何用js無刷新實現全選、反選、全不選？

<asp:DataList ID="DataList1" runat="server" onitemdatabound="DataList1_ItemDataBound" RepeatColumns="1" RepeatDirection="Horizontal">
<ItemTemplate>
<div>
<%# Eval("company") %><asp:Label ID="Label1" runat="server"  Text=""></asp:Label></div>                              
<div>
<asp:DataList ID="DataList2" runat="server">
<ItemTemplate>
<div>
  <asp:CheckBox ID="CheckBox1" runat="server" />
<span><%# Eval("realname") %></span></div>
</ItemTemplate>          
</asp:DataList>
</div>
</ItemTemplate>        
</asp:DataList>

我想無刷新實現，用後台代碼我已經實現了，老刷新不爽..大俠們請出手～～謝謝！

[阿非]

我猜你是 用的服务器button 写的 OnClick="setChecked" 是么？

换成 OnClientClick="setChecked(1);"

在你套代码之前，你应该运行一下示例

[风2013]

    
        //全选
        $("#btn_AllCheck").click(function() {
            $("#div_list :checkbox").attr("checked", "true");
        })
        //取消
        $("#btn_cancel").click(function() {
            $("#div_list :checkbox").removeAttr("checked","false");
        })
      $("#btn_RevCheck").click(function() {
            $("#div_list :checkbox").each(function() {
                $(this).attr("checked") ? $(this).attr("checked", false) :   $(this).attr("checked", true);
            })
        })

在控件的外面加一个<div id='div_list'></div> 把这个div套着你那段内容就可以了

[peng_yaoming]

可以了，我用的是服務端的button，是要OnClientClick，用這個方法，會先全選，然後就自動刷新到全不選了...
後來我改用客戶端button，就可以無刷新實現了，謝謝各位！
可能我之前代碼也應該行，但是用到服務端button了...我還要測試一下！
問題解決，非常感謝！

但是我還是有個疑問，我這個checkbox是嵌套在datalist2中，datalist2又是嵌套在datalist1裡的。如果在後台代碼，我們要找到checkbox，我們就要先找到datalist1，然後datalist2，再到checkbox。代碼如下

DataList dataList = (DataList)DataList1.Items[i].FindControl("DataList2");
CheckBox chk = (CheckBox)dataList.Items[j].FindControl("CheckBox1");//实例CheckBox1

而用js，好像就直接從datalist1，然後就可以找到checkbox了？！

[阿非]

會先全選，然後就自動刷新到全不選了...
---------------------------
OnClientClick="setChecked(1);"
=>
OnClientClick="setChecked(1);return false;"

-------------------------------------

dom 操作, 根据 datalist1 生成的 table 查找所有指定tagName 的子元素

[peng_yaoming]

[Quote=引用 22 楼 sandy945 的回复:]
會先全選，然後就自動刷新到全不選了...
---------------------------
OnClientClick="setChecked(1);"
=>
OnClientClick="setChecked(1);return false;"

-------------------------------------

dom 操作, 根据 datalist1 生成的 ……
[/Quote]

噢～～感謝感謝！

[x363961461]

还是要理解下asp。net控件原理的。不然老是纠结这种问题，

[子夜__]

http://topic.csdn.net/u/20110831/10/df9be234-5190-474c-8829-8d1f89eb1655.html?18052

[子夜__]

[Quote=引用 1 楼 wxr0323 的回复:]

http://topic.csdn.net/u/20110831/10/df9be234-5190-474c-8829-8d1f89eb1655.html?18052
[/Quote]
贴错。 太卡了

[子夜__]

http://topic.csdn.net/u/20070529/09/682d1204-98ce-4e9d-8af3-044ebe22870f.html
this

[moonwrite]

jQuery
$(document).ready(function() {
$("#chkSelectAll").click(function() {
var bChecked = $(this).attr("checked");
$("#<%=gvProductItems.ClientID%> :checkbox").attr("checked", bChecked);

});

$("#<%=btnBatchAdd.ClientID %>").click(function() {
var IsChecked = false;
$("input[type='checkbox'][name*='chkSelect']").each(function(i) {
if ($(this).is(":checked")) {
IsChecked = true;
return false;
}
})

if (IsChecked) {
return true;
}
else {
alert("请勾选记录！");
return false;
}
});
});

[peng_yaoming]

  <script language="javascript" type="text/javascript">
    function select_checkall()
    {
    var tablelist=document.getElementById("<%=this.DataList1.ClientID%>"); 
    var table=tablelist.getElementsByTagName("input");  
    var len=table.length;
    if(len>0)
    {
    var i=0;
   for(i=0;i<len;i++)
   table[i].checked=true;  
    }
    
//反选
function reserveCheck()
{
var tablelist=document.getElementById("<%=this.DataList1.ClientID%>"); 
    var table=tablelist.getElementsByTagName("input");  
    var len=table.length;
 if(len>0)
 {
 var i=0;
   for(i=0;i<len;i++)
   {
     if(names[i].checked)
     names[i].checked=false;
     else
     names[i].checked=true;     
   }
 } 
}
</script>

這個代碼，如果是一個datalist就可以實現，但是兩個datalist用js就不知道怎麼找到了...
for (int i = 0; i < DataList1.Items.Count; i++)
{
DataList dataList = (DataList)DataList1.Items[i].FindControl("DataList2");
for (int j = 0; j < dataList.Items.Count; j++)
{
CheckBox chk = (CheckBox)dataList.Items[j].FindControl("CheckBox1");//实例CheckBox1
chk.Checked = true;//全为真
}
}
//這個是後台代碼實現，但要刷新... 我是用button來控制全選、反選、全不選的

[x363961461]

function AllCheck()
{
	var	a	=	document.getElementsByName("ckSP");   
		for	(var   i=0;   i<a.length;   i++)   
		{   
		    a[i].checked=true;
		    
		     $("#"+"tr"+a[i].id).css("background-color","#F7F7F7");
		     
		}
 document.getElementById("selectAll").onclick=NotAllCheck;
}

function NotAllCheck()
{
	var	a	=	document.getElementsByName("ckSP");   
	for	(var   i=0;   i<a.length;   i++)   
	{   
	    a[i].checked=false;
	     $("#"+"tr"+a[i].id).css("background-color","White");

	}
document.getElementById("selectAll").onclick=AllCheck;

}

[peng_yaoming]

[Quote=引用 6 楼 x363961461 的回复:]
JScript code


function AllCheck()
{
var a = document.getElementsByName("ckSP");
for (var i=0; i<a.length; i++)
{
a[i].checked=true;
……
[/Quote]

我現在主要是“找不到checkbox”，如果是一個datalist，就可以用document.getElementById和document.getElementsByName找到checkbox...

[阿非]

两个也是一样的

[peng_yaoming]

[Quote=引用 3 楼 wxr0323 的回复:]
http://topic.csdn.net/u/20070529/09/682d1204-98ce-4e9d-8af3-044ebe22870f.html
this
[/Quote]

這個鏈接上的，問題還沒解決的..

[x363961461]

我現在主要是“找不到checkbox”

楼主3个三角了，难道不知道服务器控件生成html控件后，会改变ID和NAME吗？？？？？、
点开 源 看看。一切就有答案了，

[x363961461]

另外 请加个name属性

[阿非]

<!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>
        var setChecked = function (status) {
            var elArr = document.getElementById('<%=dl.ClientID %>').getElementsByTagName('input');
            for (var i = 0, len = elArr.length; i < len; i++) {
                if (elArr[i].type == "checkbox") {
                    if (status == 0) {
                        elArr[i].checked = false;
                    } else if (status == 1) {
                        elArr[i].checked = true;
                    } else if (status == 2) {
                        elArr[i].checked = !elArr[i].checked;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" onclick="setChecked(1);" value="全选" />
    <input type="button" onclick="setChecked(2);" value="反选" />
    <input type="button" onclick="setChecked(0);" value="全不选" />
    <asp:DataList ID="dl" DataSource="<%#DataSource() %>" runat="server">
        <ItemTemplate>
            <asp:DataList ID="dlChild" DataSource="<%#DataSource() %>" runat="server">
                <ItemTemplate>
                    <asp:CheckBox ID="cbx" runat="server" Text="服务器端控件" />
                    <input type="checkbox" />html tag
                </ItemTemplate>
            </asp:DataList>
        </ItemTemplate>
    </asp:DataList>
    </form>
</body>
</html>

protected string[] DataSource()
        {
            return new string[] { "1", "2", "3" };
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                dl.DataBind();
            }
        }

[peng_yaoming]

[Quote=引用 12 楼 sandy945 的回复:]
HTML code

<!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……
[/Quote]
我嘗試過，報錯
編譯器錯誤訊息: CS1061: 'ASP.admin_userpower_aspx' 不包含 'setChecked' 的定義，也找不到擴充方法 'setChecked' 來接受型別 'ASP.admin_userpower_aspx' 的第一個引數 (您是否遺漏 using 指示詞或組件參考?)

兩個datalist跟一個datalist會一樣嗎？假如在後台代碼，那麼就要首先找到d1，然後找到d2，最後才能找到checkbox的。
我一年多沒有搞這些了，現在想自己做個小網站..

[LMAOhuaNL]

[Quote=引用 12 楼 sandy945 的回复:]

HTML code

<!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">……
[/Quote]
这样写应该不会报错的吧