Web前端案例_多选练习案例

￡神魔★判官ぃ 2022-06-13 09:58 177阅读 0赞

**Web前端案例\_多选练习案例**

> 关于多选框的checked属性以及span标签的innerhtml属性的练习。

1.案例分析

> 利用多选框的checked属性以及span标签的innerHTML属性实现此案例。

2.实现效果

> 点击全选框，实现选择框已经选中的变未选中，未选中的变选中，点击计算总价按钮，实现价格的实时更新
> 
>   
>

3.实现代码

>     <!DOCTYPE html>
>     <html>
>     	<head>
>     		<meta charset="UTF-8">
>     		<title></title>
>     	</head>
>     	<body>
>     		全选:<input type="checkbox" id="all" οnclick="checkAll()"/><br />
>     	    <input type="checkbox" name="computer" value="2000" />笔记本1 2000元<br />
>     	    <input type="checkbox" name="computer" value="2000" />笔记本2 2000元<br />
>     	    <input type="checkbox" name="computer" value="2000" />笔记本3 2000元<br />
>             <input type="checkbox" name="computer" value="2000" />笔记本4 2000元<br />
>             <input type="checkbox" name="computer" value="2000" />笔记本5 2000元<br />
>             <input type="checkbox" name="computer" value="2000" />笔记本6 2000元<br />
>             <input type="button" value="计算总价" οnclick="addPrice()" /><span id="price"></span>
>     	</body>
>     	<script>
>     		function checkAll(){
>     			//var all = document.getElementById("all");
>     			var computer = document.getElementsByName("computer");
>     			for (var i=0;i<computer.length;i++) {
>     				if(computer[i].checked){
>     					computer[i].checked = false;
>     				}else{
>     					computer[i].checked = true;
>     				}
>     			}
>     		}
>     		
>     		function addPrice(){
>     			var price = 0;
>     			var computer = document.getElementsByName("computer");
>     			var span = document.getElementById("price");
>     			for (var i=0;i<computer.length;i++) {
>     				if(computer[i].checked){
>     					var tPrice = parseInt(computer[i].value);
>     					price += tPrice;
>     				}
>     			}
>     			span.innerHTML = price+"元";
>     		}
>     	</script>
>     </html>
> 
>   
>

4.效果截图

> ![Center][]![Center 1][]![Center 2][]  
>

>   
>

5.总结分析

> 案例实现没有太大的难度，主要就是获取对应的标签对象，利用对象的相关属性加以实现，稍微有点逻辑问题。

>   
>

[Center]: https://img-blog.csdn.net/20170704163730826?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWdfbmV2ZXJnaXZldXA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20170704163734390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWdfbmV2ZXJnaXZldXA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220613/29507fba3ce54eefb48ca6020bccf512.png