效果:
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>