using checkbox as radio button

Question

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

for eg:

                   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.

thanks much.

rahul · Accepted Answer · 2010-04-16 06:41:31Z

14

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

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

edited Apr 16, 2010 at 6:41

answered Apr 16, 2010 at 6:00

rahul

188k50 gold badges239 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GlenCrawford Over a year ago

Feel that I should probably point out that this solution will require jQuery to work, and there is no indication that the question asker wants (or is able) to use jQuery.

abatishchev Over a year ago

@RoseOfJericho: Tag ajax in original post means that poster is ready to use some extension over JavaScript but don't know which one. Because AJAX has nothing about such functionality, jQuery is what he need

GlenCrawford Over a year ago

@abatishchev: I completely agree. I only raised my comment so the poster doesn't try and adapt the above code for his needs thinking that it's vanilla JS and be left wondering why it doesn't work.

user290870 Over a year ago

Hi, I mentioned ajax to find out if people are using some other implementations other than form input elements to solve this kind of a problem.

EMP · Accepted Answer · 2010-04-16 06:12:38Z

5

You should not use checkboxes as radio buttons (or vice-versa): this is inconsistent with the user's mental model, so it confuses people.

This is a problem with no ideal solution, but your initial suggestion of having a "not applicable" option as part of a group of 3 radio buttons is fairly common. If you pre-select the "not applicable" option by default and perhaps de-emphasize it visually (eg. gray it out) then from the user's point of view it will be almost as if there are only 2 options, but they can recover if they accidentally select one and want to "unselect" it.

edited Apr 16, 2010 at 6:12

answered Apr 16, 2010 at 6:00

EMP

62.6k57 gold badges168 silver badges223 bronze badges

Comments

Gary Rodas · Accepted Answer · 2013-05-30 14:27:48Z

4

this is correct form, "checked" is a proprietary and not attribute

   $(function(){
      $("input:checkbox.chkclass").each(function(){
        $(this).change(function(){
            $("input:checkbox.chkclass").not($(this)).prop("checked",false);
            $(this).prop("checked", $(this).prop("checked"));       
        });   
      });
    });

answered May 30, 2013 at 14:27

Gary Rodas

411 bronze badge

Collectives™ on Stack Overflow

using checkbox as radio button

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related