zoukankan      html  css  js  c++  java
  • js——实现多选

    效果:

    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>
  • 相关阅读:
    Java堆栈内存总结
    Java String使用总结
    Java异常处理
    音乐之声——midi制作原理
    Windows使用问题总结
    Chrome浏览器的使用
    搭建svn服务器
    Windows实用快捷键
    Phone文件备份
    9大背包第一弹 | 01背包
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/11699267.html
Copyright © 2011-2022 走看看