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>

 

posted @ 2013-08-15 10:29  ZhenJie.W  阅读(622)  评论(0)    收藏  举报