全选
效果:
代码:
<html>
<head>
<title>Document</title>
</head>
<body>
<!--
创建一个页面
** 复选框和按钮
- 四个复选框 表示爱好
- 一个复选框 操作全选/全不选
- 三个按钮 代表事件全选,全不选,反选
-->
<input type="checkbox" id="boxid" onclick="quanxuan();"/>全选/全不选<br/>
<input type="checkbox" id="box1" name="love">篮球<br/>
<input type="checkbox" id="box2" name="love">足球<br/>
<input type="checkbox" id="box3" name="love">排球<br/>
<input type="checkbox" id="box4" name="love">羽毛球<br/>
<input type="button" value="全选" onclick="quanxuan();">
<input type="button" value="全不选" onclick="buxuan();">
<input type="button" value="反选" onclick="fanxuan();">
<script type="text/javascript">
function quanxuan(){
/*
1.获取要操作的复选框
2.返回的是数组,使用属性checked判断复选框是否为选中,checked=true
3.遍历数组,得到每一个checkbox,将其设置为true
*/
var loves=document.getElementsByName("love");
for( var i=0;i<loves.length;i++){
var love1=loves[i];
love1.checked=true;
}
}
function buxuan(){
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++){
var love1=loves[i];
love1.checked=false;
}
}
function fanxuan(){
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++){
var love1=loves[i];
if(love1.checked==true)
love1.checked=false;
else
love1.checked=true;
}
}
</script>
</body>
</html>
下拉列表左右选择
<html>
<head>
<title>下拉列表左右选择框</title>
<style type="text/css">
</style>
</head>
<body>
<div id="div1" style="float:left;">
<div>
<select id="select1" multiple="multiple" style="width:120px;height:100px;">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边->" onclick="right1();"><br>
<input type="button" value="全部添加到右边->" onclick="right2();">
</div>
</div>
<div id="div2">
<div>
<select id="select2" multiple="multiple" style="width:120px;height:100px;">
<option>选项5</option>
</select>
</div>
<div>
<input type="button" value="<-选中添加到左边" onclick="left1();"><br>
<input type="button" value="<-全部添加到左边" onclick="left2();">
</div>
</div>
<script type="text/javascript">
//1
function right1(){
/*
1.获取select1 里的option,getElementsByTagName()返回的是数组
2.判断是否被选中,属性selected=true吗
3.如果是选中,就将其添加到右边
4.得到select2
5.添加选中的部分,appendChild()
*/
var select1=document.getElementById("select1");
var options1=select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++){
var option1=options1[i];
if(option1.selected==true){
var select2=document.getElementById("select2");
select2.appendChild(option1);
i--;
}
}
}
//下面三个方法和第一个差不多,省略..
function right2(){
}
function left1(){
}
function left2(){
}
</script>
</body>
</html>
省市联动
代码:
<html>
<head>
<title>省市联动</title>
</head>
<body>
<!--
1.创建一个页面,包含两个下拉框
2.在第一个下拉框
-->
<select id="country" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="city">
<option value="0">--请选择--</option>
</select>
</body>
<script type="text/javascript">
//创建二维数组存储数据
var arr=new Array(4);
arr[0]=["中国","南京","抚州","长春","唐山","青岛"];
arr[1]=["美国","华盛顿","底特律","纽约","休斯顿"];
arr[2]=["德国","慕尼黑","柏林","法兰克福","狼堡"];
arr[3]=["日本","北海道","东京","大阪","广岛","长崎"];
function add1(val){
/*
1.遍历二维数组
2.得到数组
3.拿到数组中的第一个值和传递过来的值作比较
4.如果相同,获取到第一个值后边的元素
5.得到city的select
6.添加过去使用appendChild
- 创建option
*/
var city1=document.getElementById("city");
var options1=city1.getElementsByTagName("option");
for(var m=0;m<options1.length;m++){
var op=options1[m];
city1.removeChild(op);
m--;
}
for(var i=0;i<arr.length;i++){
var arr1=arr[i];
var firstvalue=arr1[0];
if(firstvalue==val){
for(var j=1;j<arr1.length;j++){
var value=arr1[j];//得到城市的名称
//创建option
var option1=document.createElement("option");
var text=document.createTextNode(value);
option1.appendChild(text);
city1.appendChild(option1);
}
}
}
}
</script>
</html>
动态生成表格
代码:
<html>
<head>
<title>Document</title>
</head>
<body>
<!--
1.创建一个页面
-->
行:<input type="text" id="h"/><br>
列:<input type="text" id="l"/><br>
<input type="button" value="生成" onclick="add2();">
<div id="divv">
</div>
</body>
<script type="text/javascript">
function add2(){
/*
1.得到输入的行和列
2.生成表格
** 循环行
** 在行里循环单元格
3.显示到页面上
** 把表格的代码设置到div里面
** 使用innerHTML属性
*/
var h=document.getElementById("h").value;
var l=document.getElementById("l").value;
var tab="<table border='1' bordercolor='red' width='300' height='300'>";
for(var i=1;i<=h;i++){
tab+="<tr>";
for(var j=1;j<=l;j++){
tab+="<td>";
tab+="</td>";
}
tab+="</tr>";
}
tab+="</table>";
//document.write(tab);
//得到div标签
var divv=document.getElementById("divv");
divv.innerHTML=tab;
}
</script>
</html>