横向，纵向只能选择一个radio

Question

如图下面是我想要的效果 
下面是错误的
HTML
代码如下:
<table cellspacing="0" cellpadding="0" border="0">
            <tr class="GHR_HEADER">
                <td height="20" class="GHR_LEGENDTEXT" width="25%">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
            </tr>
            <tr>
                <td class="GHR_LEGENDTEXT">
                </td>
                <td align="center" class="GHR_LEGENDTEXT4">
                    4
                </td>
                <td align="center" class="GHR_LEGENDTEXT3">
                    3
                </td>
                <td align="center" class="GHR_LEGENDTEXT2">
                    2
                </td>
                <td align="center" class="GHR_LEGENDTEXT1">
                    1
                </td>
            </tr>
            <tr class="GHR_ODDROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        Apple</div>
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_EVENROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        Banana</div>
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_ODDROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        orange</div>
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_EVENROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        pear</div>
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
        </table>

Answer 1

每一列一个class 选中一个后其他的相同class的disable掉

Answer 2

用JQ:<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  var r=$("#sel input");
  var len=r.size();//alert(len)
  $("#sel input").each(function(){
    var val=this.value;
    this.onclick=function(o,val){return function(){
      for(var k=0;k<len;k++){
        if(r[k].value==val){ r[k].checked=false  }
      }
      this.checked=true
    }}(this,val)
  });
});
</script>

Answer 3

简化一下闭包参数
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  var r=$("#sel input"),len=r.size();
  $("#sel input").each(function(){
    var val=this.value;
    this.onclick=function(val){return function(){
      for(var k=0;k<len;k++){
        if(r[k].value==val){ r[k].checked=false  }
      }
      this.checked=true
    }}(val)
  });
});
</script>

Answer 4

如果默认都是没有选中的
在每个td中保存一个值0,如果某个TD中的radio选 中,先判断同行中是否有值为1的TD及同列中是否有值为1的TD,如果有,就取消选中,给出提示,如果没有,就设置td中值0改为1
不知道可不可以.

Answer 5

<html><table id='tb' cellspacing="0" cellpadding="0" border="0">
            <tr class="GHR_HEADER">
                <td height="20" class="GHR_LEGENDTEXT" width="25%">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
            </tr>
            <tr>
                <td class="GHR_LEGENDTEXT">
                </td>
                <td align="center" class="GHR_LEGENDTEXT4">
                    4
                </td>
                <td align="center" class="GHR_LEGENDTEXT3">
                    3
                </td>
                <td align="center" class="GHR_LEGENDTEXT2">
                    2
                </td>
                <td align="center" class="GHR_LEGENDTEXT1">
                    1
                </td>
            </tr>
            <tr class="GHR_ODDROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        Apple</div>
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_EVENROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        Banana</div>
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_ODDROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        orange</div>
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_EVENROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        pear</div>
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
        </table>
<script>window.onload=function(){ var arr=document.getElementById('tb').getElementsByTagName('input');
        for(var i=0,len=arr.length;i<len;i++){              if(arr[i].type=="radio"){

   (function(){
                    var c=arr[i];
                    arr[i].onclick=function(){ rClick(c);};
                }())                           
              }
        }
}
var flag={};
var rClick=function(obj){
//obj.getAttribute("");
        if(flag[obj.value]){
             obj.checked=false;
             return false;
        }
        flag[obj.value]=true;
}
</script>
</html>

Answer 6

好久没写js 了， var flag={}; 换成闭包变量的话 会更好一些~

Answer 7

哦，4楼代码的前提忘记说了，要给表格加个id：
var r=$("#sel input")
红字是指表格的id,如下：
<table id='sel' cellspacing="0" cellpadding="0" border="0">

Answer 8

<script>window.onload=function(){ var arr=document.getElementById('tb').getElementsByTagName('input');
        for(var i=0,len=arr.length;i<len;i++){
              if(arr[i].type=="radio"){
                    arr[i].onclick=rClick;                                          
              }
        }
}
var fn=(function(){            
           var flag=[];    
           return function(){            
                  return flag;  
           }  
        })()  
var rClick=function(){
//this.getAttribute("attName");
        if(fn()[this.value]){
             this.checked=false;
             return false;
        }
        fn()[this.value]=true;
}
</script>

Answer 9

toury
兄弟的功能实现啦
但是能不能用纯js写出来不用jquery
下面是我的代码
但是有问题：把radio disabled之后不能还原啦
  function getDisabledsIds(classname) {
            var classElements = [];
            var disableIds = ',';
            var disableValue = ',';
            classElements = document.getElementsByTagName('input');
            for (var i = 0; i < classElements.length; i++) {
                if (classElements[i].className == classname) {
                    if (classElements[i].checked == false) {
                        disableIds += classElements[i].id + ',';
                        disableValue += classElements[i].value + ',';
                    }
                }
            }
            Disable_other_horizontal_radio(disableIds.substring(1, disableIds.length - 1), disableValue.substring(1, disableValue.length - 1));
        }
        function Disable_other_horizontal_radio(Ids,Values) {
            var arrayIds = [] ;
            var arrayvalues = [];
            arrayIds = Ids.split(",");
            arrayvalues = Values.split(",");
            for(var i=0;i<arrayIds.length;i++) {
                if (document.getElementById(arrayIds[i]).value == arrayvalues[i]) {
                    document.getElementById(arrayIds[i]).disabled = true;
                }
             
            }
        }

Answer 10

纯JS的：<script type="text/javascript">
window.onload=function(){
  var r=document.getElementById("sel").getElementsByTagName("INPUT");
  var len=r.length;//alert(len)
  for (var i=0;i<len;i++){
    var val=r[i].value;
    r[i].onclick=function(val){return function(){
      for(var k=0;k<len;k++){
        if(r[k].value==val){ r[k].checked=false  }
      }
      this.checked=true
    }}(val)
  }
}
</script>
</head>
<body>
<table id='sel' cellspacing="0" cellpadding="0" border="0">
            <tr class="GHR_HEADER">
                <td height="20" class="GHR_LEGENDTEXT" width="25%">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
                <td width="18%" align="center" class="GHR_LEGENDTEXT">
                </td>
            </tr>
            <tr>
                <td class="GHR_LEGENDTEXT">
                </td>
                <td align="center" class="GHR_LEGENDTEXT4">
                    4
                </td>
                <td align="center" class="GHR_LEGENDTEXT3">
                    3
                </td>
                <td align="center" class="GHR_LEGENDTEXT2">
                    2
                </td>
                <td align="center" class="GHR_LEGENDTEXT1">
                    1
                </td>
            </tr>
            <tr class="GHR_ODDROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        Apple</div>
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20038" name="QUESTION_132_13174_20038" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_EVENROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        Banana</div>
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20039" name="QUESTION_132_13174_20039" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_ODDROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        orange</div>
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20040" name="QUESTION_132_13174_20040" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
            <tr class="GHR_EVENROW">
                <td valign="middle">
                    <div class="GHR_QUESTIONTEXT">
                        pear</div>
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="4" class="GHR_LEGENDTEXT4">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="3" class="GHR_LEGENDTEXT3">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="2" class="GHR_LEGENDTEXT2">
                </td>
                <td align="center">
                    <input type="radio" id="20041" name="QUESTION_132_13174_20041" value="1" class="GHR_LEGENDTEXT1">
                </td>
            </tr>
        </table>
</body>

Answer 11

纵向name一样不就可以了吗?何必要用jS

Answer 12

顾头不顾腚啊，纵向name一样了，横向怎么办呢？哈哈

Answer 13

这是一种效果,取消同列中的选中项<script>window.onload=function(){ var arr=document.getElementById('tb').getElementsByTagName('input');
        for(var i=0,len=arr.length;i<len;i++){
              if(arr[i].type=="radio"){
                    arr[i].onclick=rClick;                                          
              }
        }
}
var fn=(function(){            
           var flag={};    
           return function(){            
                  return flag;  
           }  
        })()  
var rClick=function(){
//this.getAttribute("attName");
        var val=fn()[this.value];                
            if(val&&val!=this){                  
                  val.checked=false;             
            }            
            fn()[this.value]=this;            
}
</script>

Answer 14

这是另外一种效果，同列中有选中项 不能被选<script>window.onload=function(){ var arr=document.getElementById('tb').getElementsByTagName('input');
        for(var i=0,len=arr.length;i<len;i++){
              if(arr[i].type=="radio"){
                    arr[i].onclick=rClick;                                          
              }
        }
}
var fn=(function(){            
           var flag=[];    
           return function(){            
                  return flag;  
           }  
        })()  
var rClick=function(){
//this.getAttribute("attName");        var val=fn()[this.value],name=fn()[this.name];
                
            if(val){
                  if(name!=this.value){                                                 
                       this.checked=false;
                       //给ie写的
                       fn()[name].checked=true;
                       return false;
                  }             
            }
            else{
                  if(name){
                       fn()[name]=null;                        
                  }
            }             
               
        fn()[this.value]=this;
        fn()[this.name]=this.value;
}
</script>