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

来源：互联网发布：推荐高中数学视频软件编辑：程序博客网时间：2024/06/05 09:36

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" onclick="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="计算总价" onclick="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.效果截图

5.总结分析

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

阅读全文

0 0