全选按钮
水果选材
<p>
<input type="checkbox" id="selectAll">全选/不全选
</p>
<hr>
<ul class="shop">
<li><input type="checkbox">苹果</li>
<li><input type="checkbox">梨</li>
<li><input type="checkbox">葡萄</li>
<li><input type="checkbox">香蕉</li>
<li><input type="checkbox">留恋</li>
</ul>
<script type="text/javascript">
var cbs = document.querySelectorAll(".shop input")
document.getElementById("selectAll").onclick = function() {
var ischecked = this.checked
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = ischecked
}
}
// 给水果列表中的每一个复选框绑定一个单击事件
for (var i=0;i<cbs.length;i++) {
cbs[i].onclick=function(){
var count=0
for(var j=0;j<cbs.length;j++){
if (cbs[j].checked) {
count++
}
}
if(count==cbs.length){
document.getElementById("selectAll").checked=true
}else{
document.getElementById("selectAll").checked=false
}
}
}
</script>
地区选择
function changeOpt(){
var cityList=new Array();
cityList['请选择省份']=['--请选择城市'];
cityList['河南省']=['郑州','开封','洛阳','商丘','焦作'];
cityList['四川省']=['成都','绵阳','泸州','自贡'];
var province= document.getElementById("province").value
document.getElementById("cities").options.length=0
for(var i=0;i<cityList[province].length;i++){
var opt=new Option(cityList[province][i],cityList[province][i])
document.getElementById("cities").options.add(opt)
}
//提交
documen.getElementById("btn").onclick=function(){
if(checkUname()&&checkPwd(1)&&checkEquals()){
alert("注册成功")
}else{
alert("注册失败")
}
}
}
图片转换
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div0{
width: 880px;
height: 400px;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="list">
<img src="./img/1.jpg" alt="" width="200">
<img src="./img/2.jpg" alt="" width="200">
<img src="./img/3.jpg" alt="" width="200">
<img src="./img/4.jpg" alt="" width="200">
<!-- <img src="img/5.jpg" alt="" width="200"> -->
</div>
<div id="div0" type="background-image:url(./img/1.jpg);">
</div>
<script type="text/javascript">
var imgs =document.querySelectorAll(".list img")
// 给每个img标签绑定一个onmouseover事件
for(var i=0;i<imgs.length;i++){
imgs[i].onmouseover=function(){
document.getElementById("div0").style.backgroundImage="ur1("+this.src+")"
}
}
</script>
</body>