js 事件委托- 多元素节点的选中

时间 2019-11-24
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery.js"></script>
</head>
<body>
    <table>
        <tbody>
            <tr><td><input type="checkbox" name="ips[]" value="1"></td><td>1</td></tr>
            <tr><td><input type="checkbox" name="ips[]" value="2"></td><td>2</td></tr>
            <tr><td><input type="checkbox" name="ips[]" value="3"></td><td>3</td></tr>
            <tr><td><input type="checkbox" name="ips[]" value="4"></td><td>4</td></tr>
            <tr><td><input type="checkbox" name="ips[]" value="5"></td><td>5</td></tr>
        </tbody>
    </table>


    <button>查看结果</button>
    <div id="resule"></div>

</body>
</html>
<script>
    /**
     *  使用委托模式给相同的元素节点进行事件绑定
     *  日历表
     *  多选列表
     *
     *  原理 : 在最小元素的父类上绑定事件, 将须要触发的事件委托给父类.
     *
     */

    var tbody = $('tbody');
    var button = $('button');
    var nodeArr = new Array();

    // 事件委托绑定.
    tbody.on('click',function(e){
        var e = e || window.event,
                tar = e.target || e.srcElement;
        if(tar.nodeName.toLowerCase() === 'input')
        {
            var index = $(tar).val();
            var state = $(tar).prop("checked");
            nodeArr[index]= state;
        }
    });

    // 在console中显示结果.
    button.on('click',function(){
        var newArr = filterArray(nodeArr);
        console.log(newArr);
    });

    /**
     *  过滤节点, 只保留被选中的.
     * @param arr
     * @returns {*}
     */
    function filterArray(arr) {
        if (!(arr instanceof Array)) return false;
        var keys = new Array();
        for (var i in arr) {
            if (typeof(arr[i]) === 'undefined') continue;
            if (arr[i] === false) continue;
            keys[keys.length] = i;
        }
        return keys;
    }


</script>