js效果-多选只能选两项,如果超出自动取消第一次选的

js效果-多选只能选两项,如果超出自动取消第一次选的

这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨

<!DOCTYPE>
<html>
<head>
<title> New Document </title>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head> <body>
<p><input type="checkbox" name="aabb"><span>多选1</span></p>
<p><input type="checkbox" name="aabb"><span>多选2</span></p>
<p><input type="checkbox" name="aabb"><span>多选3</span></p>
<p><input type="checkbox" name="aabb"><span>多选4</span></p>
<p><input type="checkbox" name="aabb"><span>多选5</span></p>
<p><input type="checkbox" name="aabb"><span>多选6</span></p>
</body>
<script type="text/javascript">
var cy = [],
inpNode = $('input'); inpNode.change(function(){
var n = inpNode.index($(this)), shiftNum;
if (cy[0] == n || cy[1] == n) {
var index = cy.indexOf(n);
     cy.splice(index,index);
     return;
}
};
if (cy.length === 2) {
inpNode.eq(cy[0]).attr('checked', false);
cy.shift();
};
cy.push(n); });
</script>
</html>
上一篇:Provides PHP completions for Sublime Text


下一篇:WCF宿主实践入门