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>