HTML单选表格和多选表格实现
单选表格
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选表格</title>
</head>
<body>
<table class="radio-table" border>
<thead>
<tr>
<th>#</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="select" value="1" onclick="clickRadio()">
</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="radio" name="select" value="2" onclick="clickRadio()">
</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="radio" name="select" value="3" onclick="clickRadio()">
</td>
<td>3</td>
</tr>
</tbody>
</table>
<h3>当前选择: <span id="checked"></span></h3>
<script>
function clickRadio () {
console.log(document.querySelector('.radio-table tbody input[type=radio]:checked'))
document.getElementById('checked').innerHTML = document.querySelector('.radio-table tbody input[type=radio]:checked').value
}
</script>
</body>
</html>多选表格
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多选表格</title>
</head>
<body>
<table class="multi-table" border>
<thead>
<tr>
<th><input id="js-all-checkbox" type="checkbox" onclick="checkAll(this)"></th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="select" value="1" onclick="clickCheckbox()">
</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select" value="2" onclick="clickCheckbox()">
</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select" value="3" onclick="clickCheckbox()">
</td>
<td>3</td>
</tr>
</tbody>
</table>
<h3>当前选中: <span id="js-check-text"></span></h3>
<script>
var checkValues = []
function clickCheckbox () {
var checkDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]:checked')
checkValues = []
for (var i = 0, len = checkDomArr.length; i < len; i++) {
checkValues.push(checkDomArr[i].value)
}
updateText()
var allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]')
var allCheckbox = document.getElementById('js-all-checkbox')
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
if (!allCheckDomArr[i].checked) {
if (allCheckbox.checked) allCheckbox.checked = false
break
} else if (i === len - 1) {
document.getElementById('js-all-checkbox').checked = true
return
}
}
}
function checkAll (current) {
var allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]')
if (!current.checked) { // 点击的时候, 状态已经修改, 所以没选中的时候状态时true
checkValues = []
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
var checkStatus = allCheckDomArr[i].checked
if (checkStatus) allCheckDomArr[i].checked = false
}
} else {
checkValues = []
for (var i = 0, len = allCheckDomArr.length; i < len; i++) {
var checkStatus = allCheckDomArr[i].checked
if (!checkStatus) allCheckDomArr[i].checked = true
checkValues.push(allCheckDomArr[i].value)
}
}
updateText()
}
function updateText () {
document.getElementById('js-check-text').innerHTML = JSON.stringify(checkValues)
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录