Question

6

using checkbox as radio button

rated 0 times [ 9] [ 3] / answers: 1 / hits: 17399 / 14 Years ago, fri, april 16, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

morrismilom

Add To Favorites

Follow

Total Points: 230

Total Questions: 96

Total Answers: 114

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

answered 14 Years ago neildrews · Accepted Answer

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