您的位置：首页 > Web前端 > JavaScript

javascript 原生态 checkbox 操作

2015-07-10 16:47 716 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
//循环给复选框赋值
function ShowCheckBox() {
var data = "T00201507001,T00201507002,T00201507003,T00201507004";
var items = data.split(',');
for (var i = 0; i < items.length; i++) {
document.getElementById(items[i]).checked = true;
}
}

//复选框选择事件之后控制总价
function ShowSumTotal(id, num) {
if (document.getElementById(id).checked == true) {
var total = parseInt(num) + parseInt(document.getElementById("lblTotal").innerHTML);
document.getElementById("lblTotal").innerText = total;
}
else {
var total = parseInt(document.getElementById("lblTotal").innerHTML) - parseInt(num);
document.getElementById("lblTotal").innerText = total;
}
}

//动态获取table指定行列的数值
function ShowTable() {
alert(document.getElementById("testTable").rows[1].cells[3].innerHTML);
}

//全选
function CheckAll(e, itemname) {
var item = document.getElementsByName(itemname);
if (item == undefined) return;
for (var i = 0; i < item.length; i++) item[i].checked = e.checked;
}
</script>

</head>
<body>
<input name="chkall" value="1" type="checkbox" onclick="CheckAll(this, 'ItemD')" class="qx" />全选<br /><br />
<input type="checkbox" name="ItemD" id="T00201507001" value="T00201507001" onclick="ShowSumTotal('T00201507001', 1)" /><br />
<input type="checkbox" name="ItemD" id="T00201507002" value="T00201507002" onclick="ShowSumTotal('T00201507002', 2)" /><br />
<input type="checkbox" name="ItemD" id="T00201507003" value="T00201507003" onclick="ShowSumTotal('T00201507003', 3)" /><br />
<input type="checkbox" name="ItemD" id="T00201507004" value="T00201507004" onclick="ShowSumTotal('T00201507004', 4)" /><br />
<input type="checkbox" name="ItemD" id="T00201507005" value="T00201507005" onclick="ShowSumTotal('T00201507005', 5)" /><br />
<input type="checkbox" name="ItemD" id="T00201507006" value="T00201507006" onclick="ShowSumTotal('T00201507006', 6)" /><br />

<table border="0" id="testTable">
<tr>
<td width="100">a</td>
<td width="100">b</td>
<td width="100">c</td>
<td width="100">123</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>223</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>323</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>423</td>
</tr>
<tr>
<td>total:</td>
<td>
<span id="lblTotal">100</span>
</td>
</tr>
</table>
<br />
<input type="button" value="设置特定复选框为选中状态" onclick="ShowCheckBox()" />
<br />
<br />
<input type="button" value="获取table某一列数据" onclick="ShowTable()" />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航