关于 “js限制checkbox选择的” 问题补充

Question

本帖最后由 lovezypj 于 2009-11-11 15:38:50 编辑

Answer 1

<input type="checkbox" id="zy1" name="chk" value="ZVFGTRYUJH"/> 
<input type="checkbox" id="zy2" name="chk" value="OIUTESDFCV"/> 
<input type="checkbox" id="zy3" name="chk" value="POIJ876TFD"/> 
<input type="checkbox" id="zy4" name="chk" value="VBG34WE21Q"/> 
<input type="checkbox" id="zy5" name="chk" value="NMJUFGTR56"/> 
<input type="checkbox" id="zy6" name="chk" value="68HGFCVBGL"/> 
<input type="checkbox" id="zy7" name="chk" value="098UH65432"/> 
<input type="checkbox" id="zy8" name="chk" value="LJSNGDB876"/> 
<input type="checkbox" id="zy9" name="chk" value="098HBGSWQU"/> 
<input type="checkbox" id="zy10" name="chk" value="OIUGFCDE32"/> 
<script type="text/javascript">
<!--
    var arr = [];
    (function(){
        var ochk = document.getElementsByName('chk');
        for(var i = 0, len = ochk.length; i < len; i++){
            ochk[i].onclick = function(){
                if(this.checked){
                    if(arr.length >= 2){
                        ochk[arr[1]].checked = false;
                        arr[1] = parseInt(this.id.replace(/[^0-9]/g,'')) - 1;
                    }else{
                        arr.push(parseInt(this.id.replace(/[^0-9]/g,'')) - 1);
                    }
                }else{
                    arr.shift();
                }
            }
        }
    })();
//-->
</script>

Answer 2

<input type="checkbox" id="zy1" name="chk" value="ZVFGTRYUJH"/> 
<input type="checkbox" id="zy2" name="chk" value="OIUTESDFCV"/> 
<input type="checkbox" id="zy3" name="chk" value="POIJ876TFD"/> 
<input type="checkbox" id="zy4" name="chk" value="VBG34WE21Q"/> 
<input type="checkbox" id="zy5" name="chk" value="NMJUFGTR56"/> 
<input type="checkbox" id="zy6" name="chk" value="68HGFCVBGL"/> 
<input type="checkbox" id="zy7" name="chk" value="098UH65432"/> 
<input type="checkbox" id="zy8" name="chk" value="LJSNGDB876"/> 
<input type="checkbox" id="zy9" name="chk" value="098HBGSWQU"/> 
<input type="checkbox" id="zy10" name="chk" value="OIUGFCDE32"/> 
<div id='otip' style='position:absolute;display:none'><a href='#'>查看</a></div>
<script type="text/javascript">
<!--
// 完整功能
var getPos = function(e){
var ix = iy = 0;
do{
ix += e.offsetLeft;
iy += e.offsetTop;
}while(e = e.offsetParent);
return {
'x': ix,
'y': iy
}
};    var arr = [], otip = document.getElementById('otip'), ochk = document.getElementsByName('chk');
otip.onclick = function(){
if(arr.length < 2){
alert('少于两个元素');
}else{
alert(ochk[arr[0]-1].value + '----->' + ochk[arr[1]-1].value)
}
};    (function(){
        
        for(var i = 0, len = ochk.length; i < len; i++){
            ochk[i].onclick = function(){
                if(this.checked){
                    if(arr.length >= 2){
                        ochk[arr[1]].checked = false;
                        arr[1] = parseInt(this.id.replace(/[^0-9]/g,'')) - 1;
                    }else{
                        arr.push(parseInt(this.id.replace(/[^0-9]/g,'')) - 1);
                    }

otip.style.left = getPos(this).x + "px";
otip.style.top = (getPos(this).y + this.offsetHeight) + 'px';
otip.style.display = 'block';
                }else{
                    arr.shift();
otip.style.display = 'none';
                }
            }
        }
    })();
//-->
</script>

Answer 3

<input type="checkbox" id="zy1" name="chk" value="ZVFGTRYUJH"/> 
<input type="checkbox" id="zy2" name="chk" value="OIUTESDFCV"/> 
<input type="checkbox" id="zy3" name="chk" value="POIJ876TFD"/> 
<input type="checkbox" id="zy4" name="chk" value="VBG34WE21Q"/> 
<input type="checkbox" id="zy5" name="chk" value="NMJUFGTR56"/> 
<input type="checkbox" id="zy6" name="chk" value="68HGFCVBGL"/> 
<input type="checkbox" id="zy7" name="chk" value="098UH65432"/> 
<input type="checkbox" id="zy8" name="chk" value="LJSNGDB876"/> 
<input type="checkbox" id="zy9" name="chk" value="098HBGSWQU"/> 
<input type="checkbox" id="zy10" name="chk" value="OIUGFCDE32"/> 
<div id='otip' style='position:absolute;display:none'><a href='#'>查看</a></div>
<script type="text/javascript">
<!--
// 完整功能
var getPos = function(e){
var ix = iy = 0;
do{
ix += e.offsetLeft;
iy += e.offsetTop;
}while(e = e.offsetParent);
return {
'x': ix,
'y': iy
}
};    var arr = [],arr2 = [], otip = document.getElementById('otip'), ochk = document.getElementsByName('chk');
otip.onclick = function(){
if(arr.length < 2){
alert('少于两个元素');
}else{
arr2.length = 0;
for(var i = 0; i < ochk.length; i++){
if(ochk[i].checked){
arr2.push(ochk[i].value)
}
}
alert(arr2[0] + '---->' + arr2[1]);
}
};    (function(){
        
        for(var i = 0, len = ochk.length; i < len; i++){
            ochk[i].onclick = function(){
                if(this.checked){
                    if(arr.length >= 2){
                        ochk[arr[1]].checked = false;
                        arr[1] = parseInt(this.id.replace(/[^0-9]/g,'')) - 1;
                    }else{
                        arr.push(parseInt(this.id.replace(/[^0-9]/g,'')) - 1);
                    }

otip.style.left = getPos(this).x + "px";
otip.style.top = (getPos(this).y + this.offsetHeight) + 'px';
otip.style.display = 'block';
                }else{
                    arr.shift();
otip.style.display = 'none';
                }
            }
        }
    })();
//-->
</script>

Answer 4

哇，Click_Me朋友看来是JS高手呢，我给您发了好友请求，注意查收哦，非常感谢您的帮助