使用复选框，单选按钮 [英] using checkbox as radio button

问题描述

我要寻找一种方式供用户选择两个选项（强弱）的素质列表中的一个。

I am looking for a way for users to select one of the two options (strength or weakness) for a list of qualities.

有关，例如：

                   strength     weakness  not applicable
1. Communication 
2. Punctuality
   ...

单选按钮让我选择一个强弱。不过，我希望用户只检查申请，如果用户不小心选择了品质就没有办法撤消了单选按钮选择这些素质，除非有第三个单选按钮叫不适用或者让用户重新输入该页面。我在想，如果有一种方法，能够得到一个复选框中除了禁用或启用其他复选框的灵活性（检查/取消选中）时，其中一人被选中或取消选中，而不是使用三个单选按钮。

Radio button lets me select either a strength or weakness. However, I want the user to check only those qualities that apply and if a user accidentally selects a quality there is no way to undo the selection for a radio button unless there is a third radio button called not applicable or have the user re-enter the page. I was wondering if there is a way to be able to get the flexibility of a checkbox (check / uncheck) in addition to disabling or enabling the other checkbox when one of them is checked or unchecked instead of using three radio buttons.

我不认为我以前见过这样不知道是否有这样做的更优雅的方式这种行为。我打开其他的想法得到了相同的功能。使用复选框，单选按钮，仅仅是一个想法。

I don't think I have seen this behavior before so wondering if there is a more elegant way of doing this. I am open to other ideas to get the same functionality. Using a checkbox as radio button was just a thought.

感谢了。

推荐答案

基于JavaScript的解决方法的

Solution based on javascript

function SetSel(elem)
{
  var elems = document.getElementsByTagName("input");
  var currentState = elem.checked;
  var elemsLength = elems.length;

  for(i=0; i<elemsLength; i++)
  {
    if(elems[i].type === "checkbox")
    {
       elems[i].checked = false;   
    }
  }

  elem.checked = currentState;
}​

<input type="checkbox" class="chkclass" onclick="SetSel(this);" />
<input type="checkbox" class="chkclass" onclick="SetSel(this);" />
<input type="checkbox" class="chkclass" onclick="SetSel(this);" />
<input type="checkbox" class="chkclass" onclick="SetSel(this);" />

工作演示

Working Demo

基于jQuery的解决方法的

Solution based on jQuery

$(function(){
    $("input:checkbox.chkclass").click(function(){
      $("input:checkbox.chkclass").not($(this)).removeAttr("checked");
      $(this).attr("checked", $(this).attr("checked"));    
    });
});​

<input type="checkbox" class="chkclass" />
<input type="checkbox" class="chkclass" />
<input type="checkbox" class="chkclass" />
<input type="checkbox" class="chkclass" />

工作演示

Working Demo

这篇关于使用复选框，单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！