<!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>