CODEWITHSUNDEEP
javascript
Sachindra
Sachindra

Reputation: 6999

restricting the selection of checkboxes

how do i get the user to check only one of these checkboxes .. is there any way other than disabling the checkboxes on selection??

<td width="25%"><input type="checkbox" name="choice" value="Good" />Good</td>
<td width="25%"><input type="checkbox" name="choice" value="Average" />Average</td>
<td width="25%"><input type="checkbox" name="choice" value="Sucks" />Sucks</td>
<td width="25%"><input type="checkbox" name="choice" value="Fascinating" />Fascinating</td>

if its a javascript, please make it simple to understand ..

Upvotes: 0

Views: 84

Answers (3)

Sarfraz
Sarfraz

Reputation: 382806

Use radio buttons instead for your requirement. When you select, only one of them will get checked.

Here is the working demo of that :)

Upvotes: 0

kennytm
kennytm

Reputation: 523464

If the user can only select one of them at a time, you should use <input type="radio"> instead of checkbox.

If you must use checkbox, try (example):

var choices = document.getElementsByName('choice');

for (var i = choices.length-1; i >= 0; -- i) {
  choices[i].onclick = function () {
    for (var j = choices.length-1; j >= 0; -- j) {
      if (choices[j] != this)
        choices[j].checked = false;
    }
  }
}

Upvotes: 0

Pekka
Pekka

Reputation: 449605

You are looking for a radio button group. 

<td width="25%"><input type="radio" name="choice" value="Good" />Good</td>
<td width="25%"><input type="radio" name="choice" value="Average" />Average</td>
<td width="25%"><input type="radio" name="choice" value="Sucks" />Sucks</td>
<td width="25%"><input type="radio" name="choice" value="Fascinating" />Fascinating</td>

Upvotes: 5

Related Questions