取消选择无线电输入选择答案

【问题标题】：unselecting radio input selection取消选择无线电输入选择
【发布时间】：2014-04-23 20:57:43
【问题描述】：

在我的应用程序的一部分中，我检查重复的无线电输入选择，如果它已经被选择，则恢复为早期选择。

这是我的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;
}

这里是demo 上面的代码工作正常。问题是最初没有检查输入。在这种情况下，单选输入选择不会恢复为未选中状态。

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

【问题讨论】：

check 函数内部没有逻辑。意外运行良好。
你还有检查功能吗？还是您在寻找实际的检查功能？
你看过这个stackoverflow.com/a/9481272/839456吗？
@anurupr 我看不出 dat 有什么帮助？
您正试图取消选择一个已经被选中的单选按钮？

标签： javascript jquery html

【解决方案1】：

使用$yourRadio.prop('checked', false); 取消选中特定电台。

【讨论】：

【解决方案2】：

这样使用：

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

【讨论】：

【解决方案3】：

1) 将类属性添加到相同类型的复选框元素（具有相同名称）

   ex: class = "partyA"

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

}

【讨论】：

【解决方案4】：

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

这是DEMO

【讨论】：

他的问题中没有描述这个简短的解释。任何方式都不错...+1
这正是他需要的吗？
正如他在聊天中向我解释的那样 - 我希望他也能更新他的问题以更清楚

【解决方案5】：

这是你的代码..

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 上触发您的事件。它会正常工作的。

【讨论】：

【解决方案6】：

我认为这是您正在寻找的东西：

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

【讨论】：

【解决方案7】：

在 DOM 就绪时，检查是否有任何单选按钮被选中。如果选中任何单选按钮，则将计数器加一。在单选按钮的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++;
    }
});

看到这个DEMO

【讨论】：

这不适用于 iJay 要求的情况：如果最初没有选择一个收音机，它会失败：jsfiddle.net/GSe56/2
当您有更多类别时，此解决方案无法扩展。每次添加类别时，您都需要更新代码
我请 iJay 澄清场景并相应更新我的答案。