js——实现多选
JS 实现 多选
2023-09-27 14:29:10 时间
效果:
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>test</title> <link rel="stylesheet" href="css/amazeui.css"> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div class="am-cf"> <table class="am-table am-table-hover table-items"> <thead> <tr> <th>选择</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody id="table-body"></tbody> </table> <p style="text-align:center;"><button onclick="confirmData()" class="am-btn am-btn-warning">确认</button></p> <p class="am-u-sm-12">已选择:<span id="chooseItem"></span></p> </div> <script type="text/javascript"> var dataList = [{ id: 1, name: '王一', age: 18 }, { id: 2, name: '张二', age: 19 }, { id: 3, name: '万三', age: 20 }] $(function() { var str = ''; for (var i = 0; i < dataList.length; i++) { str = "<tr><td><input type='checkbox' name='data' value=" + dataList[i].name + "></td>" + "<td>" + dataList[i].name + "</td>" + "<td>" + dataList[i].age + "</td>" + "</tr>"; $('#table-body').append(str); } }) function confirmData() { var list = []; $('input[name="data"]:checked').each(function() { //循环name属性等于data的input,挑出选中的 list.push($(this).val());//将其对应的值存入数组 }); $('#chooseItem').text(list); } </script> </body> </html>
相关文章
- 【JavaScript】JS最简单的二级折叠菜单的实现方法(完整实例)
- Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- 参数解构 js
- JS日期比较
- js向一个数组中插入元素的几个方法-性能比较
- 微信调用照相拍照等 js 接口的权限配置 和 照片上传和下载实现
- 【手撕代码系列】JS手写实现Promise
- 《Node.js区块链开发》——1.3 加密货币就是货币
- (h5)html环境下js如何操作sass里的变量及calc 使用sass变量
- 用HTML CSS JS 实现一个工作招聘平台展示响应式网站
- [js插件开发教程]实现一个比较完整的开源级选项卡插件
- openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)
- arcgis api 3.x for js 实现克里金插值渲染图不依赖 GP 服务(附源码下载)
- JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
- js实现文本框文本域光标处插入图片文本的插件(并且光标在插入内容的内容后显示)
- js实现类似新闻条目人物简介不间断的滚动
- JS里关于事件的常被考察的知识点:事件派发、事件流、事件广播、原生JS实现事件代理
- Tab选项卡点击 滑动效果js实现
- Three.js Example 注解 —— css3d_sandbox.html