CODEWITHSUNDEEP
asp.nethtmlgridviewuser-interface
Homer
Homer

Reputation: 7806

uncheckable RadioButtons vs exclusive Checkboxes

From a UI prospective, is it better to have a set of RadioButtons with the added functionality of being able to uncheck, or have a set of exclusive CheckBoxes, meaning only one can be checked at a time?

Update:

I did not expect such negative responses to this. Maybe it would help if I gave an example that is closer to how it's being used.

I have a GridView full of databound stuff. The user has the option of choosing one of the rows as "primary", but it's not required. new example:

$(":radio").click(function() {
    if (this.previous) {
        this.checked = false;
    }
    this.previous = this.checked;
});

$(":checkbox").click(function() {
    $(":checkbox").not(this).prop("checked", false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Choose a primary city and state (if applicable).<br />
<table><tr><td>
<table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr></table></td><td>&nbsp;&nbsp;&nbsp;</td><td><table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="checkbox" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr>
</table></td><tr>
</table>

Should I include an extra control for unchecking the "primary", or just extend the functionality of the CheckBox or RadioButton ?

If you think extra RadioButton, where would that go, in the header?

BTW, it looks like JavaScript is needed to make RadioButtons work in a GridView anyway because of ASP.Net munging the GroupName.

Update 2:

Also, see ASP.NET AJAX extender MutuallyExclusiveCheckBox

Upvotes: 3

Views: 1158

Answers (4)

Ben Hull
Ben Hull

Reputation: 7673

Like other people have said, you shouldn't change the expected behaviour of native form elements. I would use a group of radio buttons, and include a button for 'clear selection'. That makes it explicit that the selection is clearable, and provides an obvious way of doing it.

Another way to do it would be to 'invent' a new type of control - probably based on hidden radio buttons, perhaps something that obviously looked like a group of 'toggles'. This is a very visual solution though, and would rely on javascript, so it's probably not the most reliable choice.

Here's an example of both solutions: http://www.spookandpuff.com/examples/clearableOptions.html

Both solutions are currently javascript reliant - you could easily give the first option a JS-free fallback by having the clear button give the form to the server, and respond with a cleared radio button set.

Upvotes: 0

Bryan Oakley
Bryan Oakley

Reputation: 386020

If the user can pick only one choice out of a set, use radiobuttons. If the user can pick any number of choices, use checkboxes. Note that the definition of "only one choice" can include a radiobutton that says "none".

That's been the standard on pretty much every platform since GUIs were invented. Deviating from that practice will only serve to confuse your users.

Upvotes: 0

jrn.ak
jrn.ak

Reputation: 36619

Though I don't agree with changing the expected functionality of radio and checkbox controls, I have had cases where I needed to.

If you do this with Javascript, it's going to fail spectacularly if your user has JS disabled.

The appearance CSS attribute is your friend.

Upvotes: 0

casablanca
casablanca

Reputation: 70701

Definitely use radio buttons, as they are meant for this purpose. Why confuse the user with checkboxes and further trouble yourself by writing code to maintain exclusive behaviour?

Upvotes: 2

Related Questions