整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
tml5实现全选按钮，及统计所选择商品的总价并输出
现有一个商品选择列表（复选框），HTML代码及效果如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="all" οnclick="checkAll(this)" />全选<br/>
<input type="button" value="总金额:" οnclick="getSum()" /><span id="sumid"></span>
</body>
</html>要求1：实现checkAll(this)函数。作用：通过选择/取消选择全选项目能够实现对所有项目的选择/取消。
提示：checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。
要求2：实现getSum()函数。作用：统计所选择商品的总价并输出在span区域。
述：
html和css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选反选功能</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
td:nth-of-type(1) {
text-align: center;
}
tbody tr,
tfoot tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
button {
width: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
<span id="txt">全选</span>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>好再来</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>好再来</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>油炸榴莲</td>
<td>好再来</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>清蒸助教</td>
<td>好再来</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"><button id="rev">反选</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>JavaScript代码
lt;!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox1"><label for="checkbox1">库里</label><br>
<input type="checkbox" id="checkbox2"><label for="checkbox2">科比</label><br>
<input type="checkbox" id="checkbox3"><label for="checkbox3">麦迪</label><br>
<input type="checkbox" id="checkbox4"><label for="checkbox4">邓肯</label><br>
<input type="checkbox" id="checkbox5"><label for="checkbox5">奥尼尔</label><br><br>
<button>全选</button><button>全不选</button><button>反选</button>
</body>
</html>
<script type="text/javascript">
$(function(){
//匹配第一个button
$(':button:eq(0)').click(function(){
//全部选中 checked=true,在前台就是表示选中
$(':checkbox').attr('checked',true);
});
//匹配第二个button
$(':button:eq(1)').click(function(){
//全部取消 checked=false,在前台就是表示未选中
$(':checkbox').attr('checked',false);
});
//匹配第三个button
$(':button:eq(2)').click(function(){
//查找每一个复选框，然后取相反
$(':checkbox').each(function(){
$(this).attr('checked',!$(this).attr('checked'));
});
});
})
</script>
*请认真填写需求信息，我们会在24小时内与您取得联系。
