使用javascript的默認單選按鈕選擇

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;
    }

它工作得很好。 演示

現在假設未選中其中一個復選框，例如在第二組中。 如果用戶從第二組中選擇了第一組單選按鈕（已在第一組中選擇了該單選按鈕），則會顯示警報。 但是單選按鈕保持選中狀態。

這是修改的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();" />

這是一個演示 。

注意：我不能使用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;
}

這是一個演示

這符合您的需求嗎？

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;
        }
   }
}

檢查這個小提琴