1：鼠标移入移出显示另一张图片
var yuanquan_1 = document.getElementById("yuanquan_1" );
yuanquan_1. onmouseover = function () {
yuanquan_1.src = "img/youhuigoujiu-2.png";
}
yuanquan_1. onmouseout = function () {
yuanquan_1.src = "img/youhuigoujiu.png";
}
2：点击元素显示内容，在点击该元素隐藏内容
var tu_add_icon=document.getElementById("tu-add-icon");
var tu_ul = document.getElementById("tu-ul" );
tu_add_icon.addEventListener( "click",function () {
if (tu_ul.style .display=='none' ) {
tu_ul. style.display = 'block';
} else{
tu_ul. style.display = 'none';
}
})
3：单选框radio切换
var man = document .getElementById("man");
var woman = document .getElementById("woman");
man. onclick = function () {
man.checked = true;
woman.checked = false;
}
woman. onclick = function () {
woman.checked = true;
man.checked = false;
}
注：把input的type和name属性都设置为radio的时候可以直接有切换的效果
4：循环添加移入移出事件
var zizhi = document.getElementsByClassName("zizhi" );
for(var i = 0 ; i<zizhi.length;i ++){
zizhi[i].addEventListener( "mouseover",function (){
this.style.width = "600px";
this.style .height = "600px" ;
this.style. position = "absolute" ;
this. style.top = 0;
})
}
for(var i = 0 ; i<zizhi.length;i ++){
zizhi[i].addEventListener( "mouseout",function (){
this.style.width = "200px";
this.style .height = "200px" ;
this.style. position = "static" ;
})
}
5：点击选框全选
function quanXuan() {
var tu_li_quanxuan = document.getElementById("checkAll" );
var duo_xuan = document.getElementsByClassName("tu-input" );
var type = tu_li_quanxuan.checked;
if(type==true) {
for(var i = 0 ; i < duo_xuan.length; i ++) {
if(duo_xuan[i].type == 'checkbox') {
duo_xuan[i].checked = true;
}
}
} else {
for(var i = 0 ; i < duo_xuan.length; i ++) {
if(duo_xuan[i].type == 'checkbox') {
duo_xuan[i].checked = false;
}
}
}
}
全选也可以这样写
function quanXuan() {
var tu_li_quanxuan = document.getElementById("checkAll" );
var duo_xuan = document.getElementsByClassName("tu-input" );
var type = tu_li_quanxuan.checked;
for(var i = 0 ; i < duo_xuan.length; i ++) {
duo_xuan[i].checked = type;
}
}
有一个单选框没有选中，全选也不选中
var tu_li_quanxuan = document.getElementById("checkAll" );
var duo_xuan = document.getElementsByClassName("tu-input" );
for (var i = 0 ; i < duo_xuan.length; i ++) {
duo_xuan[i].addEventListener( "click",function (){
if (this.checked== false) {
tu_li_quanxuan.checked =false;
}
})
}