js复选框和相册选择
js复选框，全选，全不选，反选
<body>
<form action="">
<p><input type="checkbox" name="" id="">西游记</p>
<p><input type="checkbox" name="" id="">水浒传</p>
<p><input type="checkbox" name="" id="">红楼梦</p>
<p><input type="checkbox" name="" id="">三国演义</p>
</form>
<button onclick="getAll(0)">全选</button>
<button onclick="getAll(1)">全不选</button>
<button onclick="getAll(2)">反选</button>
<script type="text/javascript">
// 获取input
let input = document.getElementsByTagName('input');
// 获取button
let but = document.getElementsByTagName('button');
// 封装一个函数
function getAll(num){
// 遍历每一个input
for(let i=0;i<input.length;i++){
// 如果num等于0就是第一个button的checked全部生效
if(num==0){
input[i].checked = true;
// 如果num等于1就是第一个button的checked全部不生效
}else if(num == 1){
input[i].checked = false;
// 当checked为true时就等于false;否则相反
}else{
input[i].checked = !input[i].checked;
}
}
}
</script>
</body>
相册选择，当我们的鼠标移动到哪一个图片上面就把当前图片放大
<style>
.big{
width: 415px;
height: 400px;
}
.small>img{
width: 100px;
height: 100px;
}
</style>
<body>
<div>
<img src="./ju.jpg" alt="" class="big">
</div>
<div class="small">
<img src="./ju.jpg" alt="">
<img src="./ying.jpg" alt="">
<img src="./hu.jpg" alt="">
<img src="./bu.jpg" alt="">
</div>
<script type="text/javascript">
// 获取所有的img
let imgs = document.getElementsByTagName('img');
// 遍历img,出第二个开始,因为第一个img是我们需要改变的，所以i=1
for(let i=1;i<imgs.length;i++){
// 当鼠标移动到哪一个img上面，就触发函数，改变当前src
imgs[i].onmouseover = function(){
imgs[0].src = this.src;
}
}
</script>
</body>
