CSS+HTML实例集合四，checkbox多选框的操作(全选等)，select获取option的value和其对应的选项，select获取选中项的value值进行设置，select的二级联动菜单

最新推荐文章于 2022-08-04 00:19:56 发布

King·Forward

最新推荐文章于 2022-08-04 00:19:56 发布

阅读量6.1k

点赞数

分类专栏： JavaWeb 文章标签： html css xhtml button function 文档

本文链接：https://blog.youkuaiyun.com/wjw_java_android/article/details/8068661

版权

JavaWeb 专栏收录该内容

26 篇文章

订阅专栏

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>