checkbox多选框的操作(全选等)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
</style>
<body>
<div><h3>商品列表</h3></div>
<input type="checkbox" name="checkAll" value="all" οnclick="checkAllElements(this)" />全选<br /><!--实现了全选摁扭-->
<input type="checkbox" name="checkbox" value="3000" />笔记本电脑 3000元<br />
<input type="checkbox" name="checkbox" value="4000" />笔记本电脑 4000元<br />
<input type="checkbox" name="checkbox" value="5000" />笔记本电脑 5000元<br />
<input type="checkbox" name="checkbox" value="6000" />笔记本电脑 6000元<br />
<input type="checkbox" name="checkbox" value="7000" />笔记本电脑 7000元<br />
<input type="checkbox" name="checkbox" value="8000" />笔记本电脑 8000元<br />
<input type="checkbox" name="checkAll" value="all" οnclick="checkAllElements(this)" />全选<br /><!--实现了全选摁扭-->
<input type="button" name="submit" value="计算总金额" οnclick="checkMethod();" />
总金额为：<span id="sum"></span>
</body>
<script type="text/javascript">
/*这种方式更简练*/
function checkAllElements(node){
var boxes=document.getElementsByName("checkbox");
for(var i=0;i<boxes.length;i++){
boxes[i].checked=node.checked;//直接把全选checkbox的checked状态赋给所有的checkbox；
}
}
/*checkAll函数是方式一，自己最先想到的*/
function checkAll(){
var boxes=document.getElementsByName("checkbox");//获取所有商品的对象
var checkAll=document.getElementsByName("checkAll");//获取全选checkbox对象
if(checkAll[0].checked||checkAll[1].checked){
for(var i=0;i<boxes.length;i++){
boxes[i].checked=true;//设置checkbox的选择状态，设置为打钩
}
}else{
for(var i=0;i<boxes.length;i++){
boxes[i].checked=false;//设置checkbox的选择状态，设置为未打钩
}
}
}
function checkMethod(){
var sum=0;
var checkBoxes=document.getElementsByName("checkbox");
for(var i=0;i<checkBoxes.length;i++){
if(checkBoxes[i].checked){
sum+=parseInt(checkBoxes[i].value);
}
//alert("+++++"+checkBoxes[i].checked);
}
var sumValue=document.getElementById("sum");
sumValue.innerHTML=(sum+"元").fontcolor("red");//对字符串进行颜色设置
}
</script>
</html>
select获取option的value和其对应的选项
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
#select{
width:100px;}
</style>
<body>
请选择国家：
<select id="select" οnchange="selected();">
<option value="">请选择</option>
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
<option value="4">俄罗斯</option>
<option value="5">意大利</option>
<option value="6">塔利班</option>
</select>
</body>
<script type="text/javascript">
function selected(){
var selects=document.getElementById("select");
for(var i=0;i<selects.length;i++){
if(selects[i].selected){
alert("value:"+selects[i].value+"------name:"+selects[i].innerHTML);//获取option的value值和获取option选项的名称
}
}
}
</script>
</html>
select获取选中项的value值进行设置
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<select id="select" style="width:110px;" οnchange="change(this);">
<option value="">请选择</option>
<option style="background-color:#000099" value="1.jpg"></option>
<option style="background-color:#00FF00" value="00FF00"></option>
<option style="background-color:#CC9900" value="CC9900"></option>
<option style="background-color:#990066" value="990066"></option>
<option style="background-color:#FF99CC" value="FF99CC"></option>
<option style="background-color:#66FF00" value="66FF00"></option>
</select>
<div id="div1">
jfkdl;afkjd附近的开始啦将疯狂的拉萨if奖附近的卡拉算法的<br />
jfkdl;afkjd附近的开始啦将疯狂的拉萨if奖附近的卡拉算法的<br />
jfkdl;afkjd附近的开始啦将疯狂的拉萨if奖附近的卡拉算法的<br />
jfkdl;afkjd附近的开始啦将疯狂的拉萨if奖附近的卡拉算法的<br />
jfkdl;afkjd附近的开始啦将疯狂的拉萨if奖附近的卡拉算法的<br />
jfkdl;afkjd附近的开始啦将疯狂的拉萨if奖附近的卡拉算法的<br />
</div>
</body>
<script type="text/javascript">
function change(selectOption){
var val=selectOption.options[selectOption.selectedIndex].value;//获取select选中的条目的对象
var div=document.getElementById("div1");
//div.style.color=val;//设置字体的颜色
div.style.backgroundImage ='url(1.jpg)';//设置背景颜色
}
</script>
</html>
select的二级联动菜单
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
select{
width:110px;}
</style>
<body>
<select id="select1" οnchange="selcity(this);">
<option>--选择省市--</option>
<option>北京</option>
<option>辽宁</option>
<option>河北</option>
<option>山东</option>
</select>
<select id="select2">
<option>--选择城市--</option>
</select>
</body>
<script type="text/javascript">
function selcity(selcity){
//定义二维数组，存储数据
var arr=[['--选择城市--'],['海淀','大兴','朝阳','昌平'],
['沈阳','大连','鞍山','抚顺'],
['石家庄','唐山','邯郸','秦皇岛'],
['济南','运城','烟台','威海']];
var index=selcity.selectedIndex;//获取选中的角标
var select2=document.getElementById("select2");
//改变select2.options的长度就行,使该长度变为1，就是保留第一个option，其他的不要
select2.options.length=1;
/*这种方式比较麻烦
for(var i=1;i<select2.options.length; ){//第一行保留即“--选择城市--”保留
select2.removeChild(select2.options[i]);//注意：remove方法执行后，select2.options.length就会-1，所以同时i++去掉就行了；
}*/
var selIndex=arr[index];
for(var i=0;i<selIndex.length;i++){
var optionNode=document.createElement("option");//通过document.createElement();创建节点
optionNode.innerHTML=selIndex[i];
select2.appendChild(optionNode);//添加子节点对象
}
}
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
