取消单选框输入的选择

Question

在我的应用程序中，我检查重复的单选框输入选择，并在已经选择了早期选择的情况下恢复它。

以下是我的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" checked="checked" onclick="return check();" />

这里是JavaScript代码

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

这里是演示代码。 以上的代码可以正常工作。问题在于如果输入框最初未被选中，那么无法将单选按钮选择重置为未选中状态。

注意：当处于选中状态时，返回false会显示警报并将复选框设置为最初的选中状态。但是，当最初处于非选中状态时，这种方法不起作用。

- iJade

---

你的 check 函数内部没有逻辑，它只是偶然运行正常。 - Ahmed Abbas

你是否已经有任何检查功能？或者你正在寻找实际的检查功能？ - nils

你看过这个吗？https://dev59.com/uGDVa4cB1Zd3GeqPiPN9#9481272？ - anurupr

@anurupr 我不明白那有什么帮助？ - iJade

<input type="radio" name="B" checked="checked" onclick="return check(this);" /> function check(e) { if (e.getAttribute('checked')) { alert('它已经被选中了'); e.prop('checked', false); return false; } } - vs7

Answer 1

在DOM就绪后，检查是否有任何单选按钮已被选中。如果有，将计数器增加1。在单选按钮的onclick事件中，检查计数器值是否为1。如果是，则返回false，否则将计数器增加1。

尝试以下代码：

HTML

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

JS

var counterA = 0;
var counterB = 0;
$(document).ready(function () {
    if ($("input:radio[name=A]").is(":checked") == true) counterA++;
    if ($("input:radio[name='B']").is(":checked") == true) counterB++;
});

$('input:radio[name=A]').click(function () {
    if (counterA == 1) {
        alert('already checked');
        return false;
    } else {
        counterA++;
    }
});
$('input:radio[name=B]').click(function () {
    if (counterB == 1) {
        alert('already checked');
        return false;
    } else {
        counterB++;
    }
});

SEE THIS DEMO

- CJ Ramki

---

这段代码不能满足iJay提出的需求：如果一个单选框没有被默认选中，则无法正常工作：http://jsfiddle.net/GSe56/2/ - nils

当你有更多的类别时，这个解决方案无法扩展。每次添加一个类别都需要更新代码。 - nils

我请 iJay 澄清了情况，并相应地更新了我的答案。 - nils

Answer 2

iJay希望提出几个问题，并为每个问题提供相同的答案。 每个答案只能选择一次。 如果用户第二次点击相同的答案，则应显示错误消息。

// 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('Oups..! You can not select this answer a second time :( Choose another one!')

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

Here is a DEMO

- nils

---

他在问题中没有描述这个简短的解释。不管怎样，很好... +1 - CJ Ramki

这是否正是他所需要的？ - CJ Ramki

正如他在聊天中向我所解释的那样 - 我希望他也能更新他的问题，使其更加清晰。 - nils

Answer 3

使用$yourRadio.prop('checked', false);来取消选中特定的单选按钮。

- CREEATION

Answer 4

Use like this:

function check() {
    //logic to check for duplicate selection
    var checked = true ? false : true;
    $(this).prop('checked', checked);
    return false;
}

- Bhojendra Rauniyar

Answer 5

1) 给同名的复选框元素（具有相同类型）添加class属性。

   ex: class = "partyA"

2)
var sourceIdsArr = new Array();

2) var sourceIdsArr = new Array();

function check() {
     $('.partyA').each(function() {
 var sourceId = $(this).val();
      if(sourceIdsArr.indexOf(sourceId) != -1){
         sourceIdsArr.push(sourceId );
      }
      else{
         alert('Its already selected');
         return false;
      }
   });

}

- java.mypassion

Answer 6

这里是您的代码...

function check() {
        //logic to check for duplicate selection
 var selectflag=0;

 var radiovalue=document.getElementsByName("B");
 for(var i=0;i<radiovalue.length;i++)
 {
    // alert(radiovalue[i].checked);
     if(radiovalue[i].checked==true)
     {
         selectflag=1;
         break;
     }
 }
 if(selectflag==1)
 {
        alert('Its already selected');
        return false;
 }
 return true;
  }

在MouseDown事件上触发您的事件。这将正常工作。

- Vijayakumar

Answer 7

我认为这是你正在寻找的内容：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>

 <input type="radio" name="A" checked="checked"  onclick="return check(this);"/>
 <input type="radio" name="A" onclick="return check(this);"/>
<script>
$( document ).ready(function() {
  this.currentradio = $("input[name='A']:checked")[0];
});
function check(t) {
     var newradio= $("input[name='A']:checked")[0]; 
    if (newradio===document.currentradio){
    alert('already selected');
        return false
    }else{
    document.currentradio = $("input[name='A']:checked")[0];
    }
 }
</script>
</body>
<html>

- Ankit Tyagi