Question

这是我想要完成的。我有2套单选按钮。不应同时选择2组中相同索引位置的单选按钮。如果用户尝试选择，则必须显示警报并且必须选择defaut单选按钮。这是我的HTML

<input type="radio" name="A" checked="checked" onclick="return check();" />
   <input type="radio" name="A" onclick="return check();" />

   <br />
[enter link description here][1]
   <input type="radio" name="B"  onclick="return check();" />
   <input type="radio" name="B" checked="checked" onclick="return check();" />

这是JS

 function check() {
        //logic to check for duplicate selection
        alert('Its already selected');
        return false;
    }

它完美无缺。 demo

现在假设，未选中其中一个复选框，例如在第二组中。如果用户从第二组中选择第一个单选按钮（已在第一组中选择），则显示警报。但单选按钮仍处于选中状态。

这是修改后的html

    <input type="radio" name="A" checked="checked" onclick="return check();" />
   <input type="radio" name="A" onclick="return check();" />

   <br />

   <input type="radio" name="B"  onclick="return check();" />
   <input type="radio" name="B" onclick="return check();" />

这是demo。

注意： 我不能使用jquery，因为代码已经是某些遗留应用程序的一部分

Answer 1

这没有jQuery：

// get all elements
var elements = document.querySelectorAll('input[type="radio"]');

/**
 * check if radio with own name is already selected
 * if so return false
 */
function check(){

  var selected_name = this.name,
      selected_value = this.value,
      is_valid = true;

  // compare with all other elements
  for(var j = 0; j < len; j++) {
      var el = elements[j];

      // does the elemenet have the same name AND is already selected?
      if(el.name != selected_name && el.value == selected_value && el.checked){
        // if so, selection is not valid anymore
        alert('nope')

        // check current group for previous selection
        is_valid = false;
        break;
      }
  };

  return is_valid;
}

/**
 * bind your elements to the check-routine
 */
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onmousedown = check;
}

这是DEMO

这是否符合您的需求？

Answer 2

对我来说，似乎你应该以另一种方式安排单选按钮：

 <input type="radio" name="col1" value="A1">
 <input type="radio" name="col2" value="A2">
 <input type="radio" name="col3" value="A3">

 <input type="radio" name="col1" value="B1">
 <input type="radio" name="col2" value="B2">
 <input type="radio" name="col3" value="B3">

这意味着用户只能在每列中选择一个值而不会出现突兀的警报或javascript。

Answer 3

为您的无线电提供价值：

<input type="radio" name="A" checked="checked" value="1" />
<input type="radio" name="A" value="2" />
<br />
<input type="radio" name="B"  value="1" />
<input type="radio" name="B" value="2" />

然后你可以这样做：

var radios = document.querySelectorAll('input[type="radio"]');
for(var i=0;i<radios.length;i++){
  radios[i].addEventListener('click', check);
}

function check(){
  var index= this.value-1;
  if(this.name=='A'){
     if(document.getElementsByName('B')[index].checked){
        alert('already selectedin other set'); 
        var otherIndex= (index==0)?1:0;
        var other = document.getElementsByName("A")[otherIndex];
        other.checked= true;
        }
    }
    else{
       if(document.getElementsByName('A')[index].checked){
           alert('already selected in other set');
           var otherIndex= (index==0)?1:0;
           var other = document.getElementsByName("B")[otherIndex]; 
           other.checked= true;
        }
   }
}

检查此fiddle

使用javascript选择默认单选按钮

3 个答案: