整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
tml5實現(xiàn)全選按鈕，及統(tǒng)計所選擇商品的總價并輸出
現(xiàn)有一個商品選擇列表（復選框），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：實現(xiàn)checkAll(this)函數(shù)。作用：通過選擇/取消選擇全選項目能夠?qū)崿F(xiàn)對所有項目的選擇/取消。
提示：checked 屬性規(guī)定在頁面加載時應(yīng)該被預先選定的 input 元素。
checked 屬性 與 <input type="checkbox"> 或 <input type="radio"> 配合使用。
checked 屬性也可以在頁面加載后，通過 JavaScript 代碼進行設(shè)置。
要求2：實現(xiàn)getSum()函數(shù)。作用：統(tǒng)計所選擇商品的總價并輸出在span區(qū)域。
述：
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小時內(nèi)與您取得聯(lián)系。
