CRainyDay

JS DOM实现切换图片、多选框全选

一.图片切换

CSS样式:

1
2
3
4
5
6
7
8
9
10
11
*{
margin: 0;
padding: 0;
}
.img{
width: 500px;
margin: 50px auto;
padding: 10px;
text-align: center;
background-color: yellowgreen;
}

html的body:

1
2
3
4
5
6
7
8
<body>
<div class="img">
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍"/>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>

分析: 想要实现点击按钮时图片的切换, 只需给按钮添加一个点击事件, 点击时修改一下img标签的src就好了.

图片:

1

2

3

4

5

JS实现图片切换:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function(){
//获取相应元素
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var img = document.getElementsByTagName("img")[0];
var info = document.getElementById("info");
//添加图片的src
var imgSrcs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var index = 0;
var str = "一共"+imgSrcs.length+"张图片,当前第";
info.innerHTML = str + (index+1) + "张";
//点击上一张的事件
prev.onclick = function(){
if(--index==-1){
index = imgSrcs.length-1;
}
img.src = imgSrcs[index];
info.innerHTML = str + (index+1) + "张";
};
//点击下一张的事件
next.onclick = function(){
if(++index==imgSrcs.length){
index = 0;
}
img.src = imgSrcs[index];
info.innerHTML = str + (index+1) + "张";
};
};

二.全选练习

html的body:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
注意: 网页中的checkedAllBox多选框, 当点击选中它时, 下面的所有多选框也选中, 当点击取消选中它时, 下面的所有多选框也取消选中; 还得保证, 如果下面的多选框全部选中, 则checkedAllBox也选中, 如果下面的多选框没有全部选中, 则它也不选中.

1.全选按钮

通过W3School离线手册查询JS对象里的HTML对象\<input> checkbox, 可知它有属性checked表示现在多选框的选中状态.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onload = function() {
//获取全选按钮
var allBtn = document.getElementById("checkedAllBtn");
//获取所有多选框
var items = document.getElementsByName("items");
//获取checkedAllBox多选框
var checkedAllBox = document.getElementById("checkedAllBox");
allBtn.onclick = function(){
for(var i = 0;i < items.length;i ++){
items[i].checked = true;
}
//选中checkedAllBox
checkedAllBox.checked = true;
};
}

2.全不选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload = function() {
//获取全不选按钮
var noBtn = document.getElementById("checkedNoBtn");
//获取所有多选框与checkedAllBox,共用之前的代码
var items = document.getElementsByName("items");
var checkedAllBox = document.getElementById("checkedAllBox");
noBtn.onclick = function(){
for(var i = 0;i < items.length;i ++){
items[i].checked = false;
}
//取消选中checkedAllBox
checkedAllBox.checked = false;
};
}

3.反选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = function() {
//获取反选按钮
var revBtn = document.getElementById("checkedRevBtn");
//获取所有多选框与checkedAllBox,共用之前的代码
var items = document.getElementsByName("items");
var checkedAllBox = document.getElementById("checkedAllBox");
revBtn.onclick = function(){
var flag = 0;
for(var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
flag += items[i].checked;
}
//如果所有多选框选中,选中checkedAllBox
if(flag==4)checkedAllBox.checked = true;
else checkedAllBox.checked = false;
};
}

4.提交

点击提交按钮时, 弹出选中的value属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function() {
//获取提交按钮
var submitBtn = document.getElementById("sendBtn");
//获取所有多选框,共用之前的代码
var items = document.getElementsByName("items");
submitBtn.onclick = function() {
for(var i = 0; i < items.length; i++) {
if(items[i].checked){
alert(items[i].value);
}
}
};
}

5.checkedAllBox

1
2
3
4
5
6
7
8
9
10
11
window.onload = function() {
//获取所有多选框与checkedAllBox,共用之前的代码
var items = document.getElementsByName("items");
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
//同步所有多选框
for(var i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
};
}

6.点击多选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function() {
//获取所有多选框与checkedAllBox,共用之前的代码
var items = document.getElementsByName("items");
var checkedAllBox = document.getElementById("checkedAllBox");
for(var i = 0; i < items.length; i++) {
//给每个多选框绑定单击响应函数
items[i].onclick = function(){
//点击多选框时,同步checkedAllBox
checkedAllBox.checked = true;
for(var j = 0; j < items.length; j++) {
if(!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
};
}
}

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有