用javascript实现邮件处理中的全部选择与读取选择

以下代码来实现我们经常遇到的功能:在网页中处理 Email 时,会有全部选择或取消的 checkbox,并把选中的内容加入一个textbox。

有两种方法可以实现:我们假设邮件列表是用 DataList 实现的,在 ItemTemplate 中加入 CheckBox1 来和书据库绑定。

用服务器控件:在 CheckBox 的 CheckedChanged 事件中实现。

private void CBSelectAll_CheckedChanged(object sender, System.EventArgs e)

{

if (CBSelectAll.Checked)

{

CheckBox CurrentCheckBox=new CheckBox();

foreach(DataListItem itemChecked in DataList1.Items)

{

CurrentCheckBox=(CheckBox)(itemChecked.FindControl("CheckBox1"));

CurrentCheckBox.Checked=true;

}

}

else

{

CheckBox CurrentCheckBox=new CheckBox();

foreach(DataListItem itemChecked in DataList1.Items)

{

CurrentCheckBox=(CheckBox)(itemChecked.FindControl("CheckBox1"));

CurrentCheckBox.Checked=false;

}

}

}

这种方法缺点是反应太慢,不适应客户的需要。

另一种方法是用 javascript:

在 HTML 中加入

 1<script language="javascript">
 2
 3function selectAll() 
 4
 5{ 
 6
 7var arrObj=document.all; 
 8
 9if(document.Form1.checkedAll.checked) 
10
11{ 
12
13for(var i=0;i<arrObj.length;i++) 
14
15{ 
16
17if(typeof arrObj[i].type != "undefined" && arrObj[i].type=='checkbox') 
18
19{ 
20
21arrObj[i].checked =true; 
22
23} 
24
25} 
26
27} 
28
29else 
30
31{ 
32
33for(var i=0;i<arrObj.length;i++) 
34
35{ 
36
37if(typeof arrObj[i].type != "undefined" && arrObj[i].type=='checkbox') arrObj[i].checked =false; 
38
39} 
40
41} 
42
43} 
44
45</script>

在对应的全部选择 checkbox 中加入 onclick=”selectAll()”, 如下:

1<input id="checkedAll" name="checkedAll" onclick="selectAll()" type="checkbox"/>

对于选中的列表,我们如何将其选中的内容加入到一个 textbox 呢?

这里的 CheckBoxList 的名称为 CBLName,TextBox 为 TextBox1 。实现的功能是将选中的 CheckBoxList 的 fieldText 加入 TextBox, 并用分号隔开。

 1<script language="javascript">
 2
 3function inputName() 
 4
 5{ 
 6
 7var CheckBoxList=document.getElementById("CBLName"); 
 8
 9var textbox=document.getElementById("TextBox1"); 
10
11textbox.value=""; 
12
13for(i=0;i<CheckBoxList.rows.length;i++) 
14
15{ 
16
17if(CheckBoxList.rows[i].cells[0].childNodes(0).checked) 
18
19textbox.value+=CheckBoxList.rows[i].cells[0].childNodes(1).innerText+";"; 
20
21} 
22
23} 
24
25</script>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus