需要互斥复选框或可取消选择的单选按钮答案

【问题标题】：Need either Mutually Exclusive Checkboxes or Deselectable Radio Buttons需要互斥复选框或可取消选择的单选按钮
【发布时间】：2016-06-24 04:10:57
【问题描述】：

我需要：

可以取消选择的单选按钮或
互斥复选框

背景信息：

我有一个中继器。

对于转发器中的每一行，都有一个可以“生成”或“重印”的关联文档。

用户应该能够在任何给定行中选择最多一个复选框。在此之后，单击按钮将一次性处理他们的所有选择。

当我搜索“互斥复选框”时，常见的回答是“这就是单选按钮的用途。”

当我搜索“可取消选择的单选按钮”时，常见的回答是“这就是复选框的用途。”

其他人建议了自定义 JavaScript/jQuery 解决方案，但没有一个方案中 CheckBoxes/RadioButtons 的数量及其 ID 是可变的。

我很难相信 ASP.NET 控件不支持此功能。有没有人遇到过这个问题？我可以使用其他控件还是需要自定义解决方案？

注意：我唯一可以访问的第三方软件是 Telerik 的 ASP.NET AJAX UI，它不包含明显的解决方案。

【问题讨论】：

“取消选择”是什么意思？您可以将组中的所有收音机设置为.checked=false
用户应该能够从单选按钮中删除选择，就像他们可以使用复选框一样。所以你建议在每一行中都有一个“清除选择”按钮，在一组单选按钮上调用“.checked=false”？
据我所知，ASP:RadioButtons 没有可访问的“OnClientClicked”处理程序，所以需要另一个控件，对吧？
可取消选择的单选按钮的概念被打破了。单选按钮是“一个值在任何时候都有效”的 UI 隐喻。如果“未选择”（又名“未定义”）是您拥有的值之一，请为其创建一个单选按钮。
这与您认为的臃肿无关。它是关于可用性的，这是基于惯例和显而易见性的。单选按钮可取消选择既不明显，也不是典型用户知道的惯例。它违背了单选按钮的工作方式，仅仅为了你的直觉就打破了用户的期望。我不会说这是一个很好的理由这样做。这就像为两个条目使用下拉菜单，“是”和“否”。只是错了。

标签： javascript c# jquery asp.net

【解决方案1】：

使用 Javascript 在转发器中的“互斥复选框”示例：

window.onload = function(){
   var repeater = document.getElementById('repeater');
   var chks = repeater.querySelectorAll('[type=checkbox]');
   for(var i = 0,chk;chk = chks[i];++i){
      chk.onclick = function(){
         if(this.checked){
           for(var j=0,ch;ch=chks[j;++j]){
             if(ch !== this)
                ch.checked = false;
           }//for
         }//if(this...
      }//chk.onclick
   }//for(var i
}//window.onload

【讨论】：

【解决方案2】：

使用复选框列表并处理 SelectedIndexChanged

private void checkedListBox1_SelectedIndexChanged(object sender, EventArgs e)  
{  
    if (checkedListBox1.CheckedItems.Count > 0)  
    {  
        foreach (int i in checkedListBox1.CheckedIndices)  
        {  
            checkedListBox1.SetItemCheckState(i, CheckState.Unchecked);  
        }  
    }  
}

【讨论】：

我现在正在研究这个控件。感谢您的回答。一旦我找到解决方案，我可能会接受它。
它不漂亮，因为所有的回帖，但它会工作。

【解决方案3】：

我更喜欢 StackOverflow，但我最终在 GitHub 上找到了这个。

https://gist.github.com/kikegarcia/6104607

这就是我最终得到的结果，以及一些文档。基本上是一样的，但是使用 .prop 而不是 .attr 因为阅读了 Tim Down 对两者之间区别的解释：.prop() vs .attr()

// mutually exclusive checkboxes within the scope of a repeater row
function cbOnClick(sender) {   
  if (sender.checked)                                                      
    $(sender).siblings(":checkbox").prop("checked", false);
    //  1        2          3         4      5        6
}

将事件启动复选框作为 jQuery 对象获取。
获取我们复选框的兄弟元素...
... type = "checkbox"。
访问它们的属性...
...“已检查”类型...
... 并将它们设置为 false。 => 自动取消选中同级复选框。

【讨论】：