JavaScript---网络编程(10)--DHTML技术演示(3)-多选框
程序员文章站
2022-04-14 11:42:17
这节讲述多选框的使用，当然，肯定是结合css和Javascript一起的。
checkbox的使用1：
演示代码：
浏览器81-演示结果">360浏览器8.1 演示结果:
这节讲述多选框的使用，当然，肯定是结合css和Javascript一起的。
checkbox的使用1： 演示代码：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DHTML技术演示---checkbox的使用1</title>
<script type="text/javascript">
//html中<pre class="brush:java;"></pre>让代码原样输出-小提示
function getSum(){
var sum=0;
var arrChkNode = document.getElementsByName("item");
for(var x=0;xaaa</font>" ;="" function="" checkall(achkallnode){="" arrchknodes="document.getElementsByName("item");" for(var="" x="0;x
<input type="checkbox" name="item" value="8000">空调:8000元<br>
<input type="checkbox" name="item" value="160">风扇:160元<br>
<input type="checkbox" name="item" value="4500">电脑:4500元<br>
<input type="checkbox" name="item" value="5000">投影仪:5000元<br>
<input type="checkbox" onclick="checkAll(this)">全选<br>
<input type="button" value="总金额是：" onclick="getSum()"><span id="sumid"> </span>
</arrchknode.length;x++){>
浏览器81-演示结果">360浏览器8.1 演示结果:
仿邮件选择的方式做多选框
table.css:
table{
border:#ff80ff 1px solid;
/*solid : 实线边框 */
width:800px;
border-collapse:collapse;
/*separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
*/
}
table td{/*table 下面的td*/
border:#0000ff 1px solid;
padding:5px;/*内补丁*/
}
table th{
border:#ff80ff 1px solid;
padding:5px;
background-color:#c0c0c0;
}
.one{
background-color:#80ff00;
}
.two{
background-color:#ff80ff;
}
.over{
background-color:#ffff00;
}
第一种方式：
代码：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DHTML技术演示---checkbox的使用2</title>
<style type="text/css">
@import url(table.css);
</style>
<script type="text/javascript">
var name;
function trColor(){
var oTableNode = document.getElementById("mailTable");
var collTrNodes = oTableNode.rows;//得到表格的所有行对象-返回数组
for(var x=1; x<colltrnodes.length;x++ ){="" if(x%2="=1){" colltrnodes[x].classname="one" ;="" }else{="" }="" colltrnodes[x].onmouseover="function(){" name="this.className;" this.classname="over" *下面这种注册事件的方式也可以="" this.onmouseout="function(){" *="" colltrnodes[x].onmouseout="function(){" onload="function(){" trcolor();="" function="" checkall(achkboxnode){="" var="" collchkboxallnodes="document.getElementsByName("all");" 取消部分选中时的显示样式="" collchkboxallnodes[0].indeterminate="false;" collchkboxallnodes[1].indeterminate="false;" collmailnodes="document.getElementsByName("mail");" for(var="" x="0;x<collMailNodes.length;x++){" collmailnodes[x].checked="aChkboxNode.checked;" collchkboxallnodes[0].checked="aChkboxNode.checked;" collchkboxallnodes[1].checked="aChkboxNode.checked;" 合并的方法：="" checkallbybtn(num){="" 获得邮件的所有多选框对象="" n="0;" 遍历所有的邮件多选框="" if(num="">1){//反选
collMailNodes[x].checked = !collMailNodes[x].checked;
}else{
collMailNodes[x].checked = num;
}
if(collMailNodes[x].checked){
n++;
}
}
if(n==0){
collChkboxAllNodes[0].checked = false;
collChkboxAllNodes[1].checked = false;
}else if(n==collMailNodes.length){
collChkboxAllNodes[0].checked = true;
collChkboxAllNodes[1].checked = true;
}else{//部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=true;
collChkboxAllNodes[1].indeterminate=true;
}
}
function deleteMail(){
if(!confirm("你真的要删除所选邮件吗？")){//弹出确认对话框
return;
}
//获取所有的邮件
var collMailChkNodes = document.getElementsByName("mail");
for(var x=0;x<collmailchknodes.length;x++){ if="" (collmailchknodes[x].checked)="" {="" 选中，则删除="" 先拿到tr对象="" var="" otrnode="collMailChkNodes[x].parentNode.parentNode;" otrnode.parentnode.removechild(otrnode);="" bug:节点容器中，remove之后，长度会变。="" x--;="" 长度修正--还有一种解决方案是：从后往前删="" }="" trcolor();="" <="" script>="" <="" head="">
<h2>邮件列表</h2>
<table id="mailTable">
<tbody><tr>
<th><input type="checkbox" name="all" onclick="checkAll(this)">全选</th>
<th>发件人</th> <th>邮件标题</th> <th>时间</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="all" onclick="checkAll(this)">全选</td>
<td colspan="3">
<!--colspan=3-表示这一列占3列 -->
<input type="button" value="全选" onclick="checkAllByBtn(1)">
<input type="button" value="取消全选" onclick="checkAllByBtn(0)">
<input type="button" value="反选" onclick="checkAllByBtn(2)">
<input type="button" value="删除所选邮件" onclick="deleteMail()">
</td>
</tr>
</tbody></table>
</collmailchknodes.length;x++){></colltrnodes.length;x++>
第二中方式：把2个方法合并为一个方法：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DHTML技术演示---checkbox的使用2</title>
<style type="text/css">
@import url(table.css);
</style>
<script type="text/javascript">
var name;
function trColor(){
var oTableNode = document.getElementById("mailTable");
var collTrNodes = oTableNode.rows;//得到表格的所有行对象-返回数组
for(var x=1; x<colltrnodes.length;x++ ){="" if(x%2="=1){" colltrnodes[x].classname="one" ;="" }else{="" }="" colltrnodes[x].onmouseover="function(){" name="this.className;" this.classname="over" *下面这种注册事件的方式也可以="" this.onmouseout="function(){" *="" colltrnodes[x].onmouseout="function(){" onload="function(){" trcolor();="" function="" checkall(achkboxnode){="" var="" collchkboxallnodes="document.getElementsByName("all");" 取消部分选中时的显示样式="" collchkboxallnodes[0].indeterminate="false;" collchkboxallnodes[1].indeterminate="false;" collmailnodes="document.getElementsByName("mail");" for(var="" x="0;x<collMailNodes.length;x++){" collmailnodes[x].checked="aChkboxNode.checked;" collchkboxallnodes[0].checked="aChkboxNode.checked;" collchkboxallnodes[1].checked="aChkboxNode.checked;" 合并的方法：="" checkallbybtn(num){="" 获得邮件的所有多选框对象="" n="0;" 遍历所有的邮件多选框="" if(num="">1){//反选
collMailNodes[x].checked = !collMailNodes[x].checked;
}else{
collMailNodes[x].checked = num;
}
if(collMailNodes[x].checked){
n++;
}
}
if(n==0){
collChkboxAllNodes[0].checked = false;
collChkboxAllNodes[1].checked = false;
}else if(n==collMailNodes.length){
collChkboxAllNodes[0].checked = true;
collChkboxAllNodes[1].checked = true;
}else{//部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=true;
collChkboxAllNodes[1].indeterminate=true;
}
}
function deleteMail(){
if(!confirm("你真的要删除所选邮件吗？")){//弹出确认对话框
return;
}
//获取所有的邮件
var collMailChkNodes = document.getElementsByName("mail");
for(var x=0;x<collmailchknodes.length;x++){ if="" (collmailchknodes[x].checked)="" {="" 选中，则删除="" 先拿到tr对象="" var="" otrnode="collMailChkNodes[x].parentNode.parentNode;" otrnode.parentnode.removechild(otrnode);="" bug:节点容器中，remove之后，长度会变。="" x--;="" 长度修正--还有一种解决方案是：从后往前删="" }="" trcolor();="" <="" script>="" <="" head="">
<h2>邮件列表</h2>
<table id="mailTable">
<tbody><tr>
<th><input type="checkbox" name="all" onclick="checkAll(this)">全选</th>
<th>发件人</th> <th>邮件标题</th> <th>时间</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="all" onclick="checkAll(this)">全选</td>
<td colspan="3">
<!--colspan=3-表示这一列占3列 -->
<input type="button" value="全选" onclick="checkAllByBtn(1)">
<input type="button" value="取消全选" onclick="checkAllByBtn(0)">
<input type="button" value="反选" onclick="checkAllByBtn(2)">
<input type="button" value="删除所选邮件" onclick="deleteMail()">
</td>
</tr>
</tbody></table>
</collmailchknodes.length;x++){></colltrnodes.length;x++>
360浏览器8.1演示结果：