HTML单选表格和多选表格实现
时间:2022-07-23
本文章向大家介绍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>
- TCP/IP 选项TcpTimedWaitDelay设置
- Windows 远程管理WinRM
- Sublime text 3 中Package Control 的安装与使用方法
- 用functools.lru_cache实现Python的Memoization
- 腾讯互联网与社会研究院秘书长司晓:将联合开展研究合作
- 幻灯片jQuery插件Orbit 介绍(附添加到WordPress教程)
- Gravatar开发者手册
- Gravatar开发者手册
- 使用Google CDN服务提供的jQuery库
- 比特币的分叉币都认为能够取代比特币,事实真的是这样吗?
- Google官方网页载入速度检测工具PageSpeed Insights 使用教程
- ASP.NET 路由
- Kafka定时清除过期数据
- 腾讯高级副总裁郭凯天:打造腾讯智库分析互联网产业前沿问题
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 数据传输 | mysqldiff/mysqldbcompare 实现 DTLE 自动化测试
- CPU有个禁区,内核权限也无法进入!
- 分布式 | DBLE 3.20.07.0 来啦!
- C语言三剑客之《C陷阱与缺陷》一书精华提炼
- Linux进程间通信(上)之管道、消息队列实践
- FPGA上电时序
- 更新Kubernetes APIServer证书
- R语言连续时间马尔科夫链模拟案例 Markov Chains
- 如何用R语言在机器学习中建立集成模型?
- 从零开始Kubernetes Operator
- TiKV源码解析系列文章(二十)Region Split源码解析
- scrapy爬虫框架和selenium的使用:对优惠券推荐网站数据LDA文本挖掘
- 单性状动物模型矩阵形式计算BLUP值
- 如何计算一般配合力和特殊配合力
- 【29期】Java集合框架 10 连问,你有被问过吗?