js 复选框

Question

    我有以下一个场景.
我有多个table.在每一个table里又有多个复选框.我要实现的是每个table中的复选框只能选一个.但也可以一个都不选.table之间的复选框不能相互影响.请问怎么实现.

Answer 1

var tables = document.getElementsByTagName("TABLE");
for(var i=0;i<tables.length;i++){
    var checkboxes = tables[i].getElementsByTagName("INPUT");
    var num = 0;
    for(var j=0;j<checkboxes.length;j++){
        if(checkboxes[j].type=="checkbox"){
            if(checkboxes[j].checked){
                num++;
            }
        }
    }
    if(num>1){
        alert("一个table中不能选择多个！");
    }
}

Answer 2

<script type="text/javascript">
function addListener(elem, type, hdl){
if (elem.addEventListener) {
elem.addEventListener(type, hdl, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, hdl);
} else {
elem['on' + type] = hdl;
}
}
function chk(e){
e = e || window.event;
var target = e.target || e.srcElement;
var all = document.getElementsByName(target.name);
for (var i = 0; i < all.length; i++) {
if (all[i] !== target) all[i].checked = false;
}
}
window.onload = function(){
var all = document.getElementsByName('gp1');
for (var i = 0; i < all.length; i++) {
addListener(all[i], 'click', chk);
}
}
</script>
<input type="checkbox" name="gp1">
<input type="checkbox" name="gp1">
<input type="checkbox" name="gp1">
<input type="checkbox" name="gp1">
<input type="checkbox" name="gp1">
<input type="checkbox" name="gp1">

Answer 3

<script type="text/javascript">
function che(_this){
    var tab = _this
    while(tab.tagName.toLowerCase( )!="table")tab=tab.parentNode
var obj_check = tab.getElementsByTagName("input");
for (var j=0;j<obj_check.length;j++){
if (obj_check[j].type=="checkbox" && obj_check[j]!=_this)obj_check[j].checked=0
}
_this.checked=_this.checked?1:0
}function setCheck(){
var obj_tab = document.getElementsByTagName("table"); 
for(var i=0;i<obj_tab.length;i++){ 
if (obj_tab[i].id.indexOf("check")!=-1){
    var obj_check = obj_tab[i].getElementsByTagName("input");
    for (var j=0;j<obj_check.length;j++)
     if (obj_check[j].type=="checkbox")
     obj_check[j].onclick=function(){che(this)}
}
}
}
window.onload = setCheck
</script><table border="1" width="25%" cellspacing="0" cellpadding="0" id=checktab1>
<tr>
<td>
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
</td>
</tr>
</table><br>
<table border="1" width="25%" cellspacing="0" cellpadding="0" id=checktab2>
<tr>
<td>
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
<input type="checkbox" value="" name="">
</td>
</tr>
</table>