请问各位大神 如何在这段代码中限制复选数量
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input输入框获取js点击文字内容</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:1000px;margin:0 auto; height:330px;overflow-y: scroll;
overflow-x: hidden;}
.c{width:100px;height:100px;line-height:25px;text-align:center;border:1px solid #eee;margin:5px;float:left;font-size:12px;cursor:pointer}
.shuju{ width:1000px;margin:0 auto; }
</style>
</head>
<body>
<div class="demo">
<div class="c" id="c0">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>1</p>
</div>
<div class="c" id="c1">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>2</p>
</div>
<div class="c" id="c2">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>3</p>
</div>
<div class="c" id="c3">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>4</p>
</div>
<div class="c" id="c4">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>5</p>
</div>
<div class="c" id="c5">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>6</p>
</div>
<div class="c" id="c6">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>7</p>
</div>
<div class="c" id="c7">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>8</p>
</div>
<div class="c" id="c8">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>9</p>
</div>
<div class="c" id="c9">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>10</p>
</div>
<div class="c" id="c10">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>11</p>
</div>
<div class="c" id="c11">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>12</p>
</div>
<div class="c" id="c12">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>13</p>
</div>
<div class="c" id="c13">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>14</p>
</div>
<div class="c" id="c14">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>15</p>
</div>
<div class="c" id="c15">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>16</p>
</div>
<div class="c" id="c16">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>17</p>
</div>
<div class="c" id="c17">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>18</p>
</div>
<div class="c" id="c18">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>19</p>
</div>
<div class="c" id="c19">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>20</p>
</div>
<div class="c" id="c20">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>21</p>
</div>
<div class="c" id="c21">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>22</p>
</div>
<div class="c" id="c22">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>23</p>
</div>
<div class="c" id="c23">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>24</p>
</div>
<div class="c" id="c24">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>25</p>
</div>
<div class="c" id="c25">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>26</p>
</div>
<div class="c" id="c26">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>27</p>
</div>
<div class="c" id="c27">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>28</p>
</div>
<div class="c" id="c28">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>29</p>
</div>
<div class="c" id="c29">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>30</p>
</div>
<div class="c" id="c30">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>31</p>
</div>
<div class="c" id="c31">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3440000460,1859220168&fm=58" /><p>32</p>
</div>
</div>
<div class="shuju">
<input id="i" type="text" style="width:320px; height:25px; border:1px solid #ccc;margin:15px 0 0 0;" />
</div>
<script type="text/javascript">
var x=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32"];
var y=[];
function $(id){
return document.getElementById(id)
};
for(var i=0,m=x.length;i<m;i++){
$("c"+i).onclick=(function(i){
return function(){
var s=y.join(",").indexOf(x[i]);
if(s>=0){
for(var r in y){
if(y[r]==x[i]){
y.splice(r,1)
}
}
}
else{
y.push(x[i])
}
$("i").value=y.join(" ");
}
})
(i)
}
</script>
</body>
</html>
