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>

 

你可能感兴趣的:(js)