Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16654 > unrolled thread

radiobuttons and checkboxes

Back to article view | Back to comp.lang.javascript

Contents

  radiobuttons and checkboxes Andrew Poulos <ap_prog@hotmail.com> - 2012-10-16 16:17 +1100
    Re: radiobuttons and checkboxes "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-10-16 11:09 +0300
    Re: radiobuttons and checkboxes "Tom de Neef" <tdeneef@qolor.nl> - 2012-10-16 12:27 +0200
      Re: radiobuttons and checkboxes "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-10-16 15:20 +0300
      Re: radiobuttons and checkboxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-10-16 21:02 +0200
    Re: radiobuttons and checkboxes Scott Sauyet <scott.sauyet@gmail.com> - 2012-10-16 04:30 -0700
    Re: radiobuttons and checkboxes SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-10-16 16:44 +0200
      Re: radiobuttons and checkboxes "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-10-16 19:32 +0300
        Re: radiobuttons and checkboxes SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-10-17 00:51 +0200
    Re: radiobuttons and checkboxes JJ <jaejunks_at@_googlemail_dot._com> - 2012-10-16 14:58 +0000
    Re: radiobuttons and checkboxes Matt McDonald <matt@fortybelow.ca> - 2012-10-16 12:00 -0400
      Re: radiobuttons and checkboxes "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-10-16 19:30 +0300
    Re: radiobuttons and checkboxes Denis McMahon <denismfmcmahon@gmail.com> - 2012-10-16 17:23 +0000
    Re: radiobuttons and checkboxes Denis McMahon <denismfmcmahon@gmail.com> - 2012-10-16 17:33 +0000
    Re: radiobuttons and checkboxes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-10-16 21:00 +0200

#16654 — radiobuttons and checkboxes

The user needs to select one or more items. I can't use radio button 
sets because that limits you to only one selected item, but if I use 
checkboxes it means users can have no selected items.

My options are:

1. Use checkboxes and when the user submits the form tell them to make a 
selection if no selection has been made. This seems the obvious choice 
but I'd rather solve the problem with design rather than message boxes.

2. Use checkboxes and don't let the user uncheck the last checked 
checkbox in the set. This means that a checkbox may not behave as expected.

Or is there some other control that I can create/design that is 
intuitive to use to achieve the same thing?

Andrew Poulos

[toc] | [next] | [standalone]

#16655

2012-10-16 8:17, Andrew Poulos wrote:

> The user needs to select one or more items. I can't use radio button
> sets because that limits you to only one selected item, but if I use
> checkboxes it means users can have no selected items.

HTML is really rather limited in issues like this.

> My options are:
>
> 1. Use checkboxes and when the user submits the form tell them to make a
> selection if no selection has been made. This seems the obvious choice
> but I'd rather solve the problem with design rather than message boxes.

I'm afraid there is no design solution other than checking that the user 
has selected at least one alternative.

You could try to apply the principle of early error detection by 
checking the situation whenever any field after the set of checkboxes is 
focused on. But this might be confusing, and people don't always fill 
out forms sequentially. As a rule, checking on submit time (and, 
naturally, in server-side code, if the form data is submitted to a 
server) is sufficient - unless the page works in a stepwise, 
application-like manner where the set of checkboxes is one step, so that 
filling out the form is sequential in a forced manner. In such a setup, 
you could show just the checkboxes (and explanations) and provide a 
"Continue" button only after at least one choice has been made.

> 2. Use checkboxes and don't let the user uncheck the last checked
> checkbox in the set. This means that a checkbox may not behave as expected.

And initially there is no checked checkbox, so this would not work to 
prevent the most common scenario: the user just skips the set of 
checkboxes without checking anything.

> Or is there some other control that I can create/design that is
> intuitive to use to achieve the same thing?

Well, in theory you could use a <select> element with the attributes 
'required' and 'multiple':

<select required multiple size=5 name=sel>
<option>foo
<option>bar
<option>zap
<option>something
<option>something else
</select>

However, this
a) does not enforce the requirement "at least one" unless the browser 
supports the HTML5 attribute 'required' (though you can of course add 
such a check in JavaScript)
b) on browsers that do support it, the user sees an 
implementation-dependent error message if he tries to proceed without 
making any choice
c) <select> with 'multiple' means poor usability: users don't encounter 
them often, and there's little intuitiveness in the usage.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#16656

"Andrew Poulos" <ap_prog@hotmail.com> schreef in bericht 
news:m-idnR5KbdOWc-HNnZ2dnUVZ_gadnZ2d@westnet.com.au...
> The user needs to select one or more items. I can't use radio button sets 
> because that limits you to only one selected item

I think that that is not true. Only radiobuttons with the same name exclude 
each other. AFAIK you can use different sets of radiobuttons as long as 
these sets use different names. At least worth trying it out.
Tom

[toc] | [prev] | [next] | [standalone]

#16658

2012-10-16 13:27, Tom de Neef wrote:

> "Andrew Poulos" <ap_prog@hotmail.com> schreef in bericht
> news:m-idnR5KbdOWc-HNnZ2dnUVZ_gadnZ2d@westnet.com.au...
>> The user needs to select one or more items. I can't use radio button sets
>> because that limits you to only one selected item
>
> I think that that is not true. Only radiobuttons with the same name exclude
> each other. AFAIK you can use different sets of radiobuttons as long as
> these sets use different names.

That is true, but it does not solve the problem. Using different names 
for radio buttons makes them isolated so that each of them is a group of 
its own. Then, once the user checks a radio button, he cannot uncheck 
it, because the only way (in HTML) to uncheck a checked radio button is 
to check another button in the same group. Moreover, this does not make 
it mandatory to check at least one of the buttons - you would still need 
to check that on form submission, just as in the more natural approach 
that uses checkboxes.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#16669

Tom de Neef wrote:

> "Andrew Poulos" […]:
>> The user needs to select one or more items. I can't use radio button sets
>> because that limits you to only one selected item
> 
> I think that that is not true. Only radiobuttons with the same name
> exclude each other. AFAIK you can use different sets of radiobuttons as
> long as these sets use different names. At least worth trying it out.

It is not practical to have two or more radiobuttons with different name in 
the same radiobutton group just so that more than one of them can be 
selected at the same time.


PointedEars
-- 
> If you get a bunch of authors […] that state the same "best practices"
> in any programming language, then you can bet who is wrong or right...
Not with javascript. Nonsense propagates like wildfire in this field.
  -- Richard Cornford, comp.lang.javascript, 2011-11-14

[toc] | [prev] | [next] | [standalone]

#16657

On Oct 16, 1:18 am, Andrew Poulos <ap_p...@hotmail.com> wrote:
> The user needs to select one or more items. I can't use radio button
> sets because that limits you to only one selected item, but if I use
> checkboxes it means users can have no selected items.
>
> My options are:
>
> 1. Use checkboxes and when the user submits the form tell them to make a
> selection if no selection has been made. This seems the obvious choice
> but I'd rather solve the problem with design rather than message boxes.
>
> 2. Use checkboxes and don't let the user uncheck the last checked
> checkbox in the set. This means that a checkbox may not behave as expected.
>
> Or is there some other control that I can create/design that is
> intuitive to use to achieve the same thing?

Also somewhat unintuitive, but possible with client-side scripting,
would be to disable the sole remaining checked checkbox in the set, re-
enabling it when a second one is checked.  I'm not sure I like it, but
it would be another possibility.

A different possibility would be to skip the standard controls
altogether since none of them really do what you want.  Here's an
interface I could imagine:  Your list with the text "Please choose at
least one" emphasized somehow.  As soon as one item is selected, that
text is de-emphasized, and a marker is left next to the selected item,
perhaps a green check-mark.  When more than one is selected, another
select gesture deselects the item, but when only one is selected, it
doesn't.  Since this involves neither radio buttons nor checkboxes, it
doesn't break normal user expectations, and would be reasonably easy
for a user to learn.


  -- Scott

[toc] | [prev] | [next] | [standalone]

#16660

Le 16/10/12 07:17, Andrew Poulos a écrit :
> The user needs to select one or more items. I can't use radio button
> sets because that limits you to only one selected item, but if I use
> checkboxes it means users can have no selected items.

And ? That's not allowed ? Why ?
Are you really sure to propose the good options, choices ?


> My options are:

No checked checkboxes ? hop! that one is checked !
(with a little delai)

> 1. Use checkboxes and when the user submits the form tell them to make a
> selection if no selection has been made. This seems the obvious choice
> but I'd rather solve the problem with design rather than message boxes.

on blurring each box the JS searches if at least one of them is checked
(onblur or onclick)
if not :
- unhide the P messaging
- hide following fields
- check the default box


> 2. Use checkboxes and don't let the user uncheck the last checked
> checkbox in the set. This means that a checkbox may not behave as expected.

Pas ni compris ! ?
If you want that at least one box is checked that can, of course, not be 
the expected behave ! !

> Or is there some other control that I can create/design that is
> intuitive to use to achieve the same thing?

as Jukka told :

<select multiple size=5 name=sel>
<option selected>foo
<option>bar
<option>zap
<option>something
<option>something else
</select>

I think with that list you can't have zero selected item, no ?
(one was pre-selected)


-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#16664

2012-10-16 17:44, SAM wrote:

> And ? That's not allowed ? Why ?
> Are you really sure to propose the good options, choices ?

Sense your questions do not make.

> as Jukka told :
>
> <select multiple size=5 name=sel>
> <option selected>foo

No, I did not. You have forged my code, and you apparently did not 
understand what I wrote about it.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#16672

Le 16/10/12 18:32, Jukka K. Korpela a écrit :
> 2012-10-16 17:44, SAM wrote:
>
>> as Jukka told :
>>
>> <select multiple size=5 name=sel>
>> <option selected>foo
>
> No, I did not. You have forged my code,

I meant : using a selecting list

> and you apparently did not
> understand what I wrote about it.

? why and how can you suppose so ?


-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#16661

Andrew Poulos <ap_prog@hotmail.com> wrote:

> The user needs to select one or more items. I can't use radio button 
> sets because that limits you to only one selected item, but if I use 
> checkboxes it means users can have no selected items.
> 
> My options are:
> 
> 1. Use checkboxes and when the user submits the form tell them to make
> a selection if no selection has been made. This seems the obvious
> choice but I'd rather solve the problem with design rather than
> message boxes. 
> 
> 2. Use checkboxes and don't let the user uncheck the last checked 
> checkbox in the set. This means that a checkbox may not behave as
> expected. 
> 
> Or is there some other control that I can create/design that is 
> intuitive to use to achieve the same thing?
> 
> Andrew Poulos

Third option would be to allow all checkboxes to be selected, but once 
none of them is selected (checked via script), disable the submit button. 
Enable it again when one is selected.

[toc] | [prev] | [next] | [standalone]

#16662

On 16/10/12 01:17, Andrew Poulos wrote:

> The user needs to select one or more items. I can't use radio button
> sets because that limits you to only one selected item, but if I use
> checkboxes it means users can have no selected items.

Have you considered a select element with the `multiple` boolean
attribute? Using that particular element may notify users that
something should be selected. Of course, textual instructions
should be present to precisely guide users.

> 1. Use checkboxes and when the user submits the form tell them to make a
> selection if no selection has been made. This seems the obvious choice
> but I'd rather solve the problem with design rather than message boxes.

But it will not work without JavaScript as you doubtless know.
As I suggested above, provide clear textual instructions to the user.
Empower the user to use the form as intended.

> 2. Use checkboxes and don't let the user uncheck the last checked
> checkbox in the set. This means that a checkbox may not behave as expected.

This is a perilous suggestion. Users--especially those who know little
about computers or the Web--dislike greedy controls. Treat those users
like human beings.

-- 
`The theologian Meric Casaubon argued--in his 1668 book, *Of Credulity
and Incredulity*--that witches must exist because, after all, everyone
believes in them. Anything that a large number of people believe must
be true'--Carl Sagan--*The Demon-Haunted World*.

[toc] | [prev] | [next] | [standalone]

#16663

2012-10-16 19:00, Matt McDonald wrote:

 >> 1. Use checkboxes and when the user submits the form tell them to make a
 >> selection if no selection has been made. This seems the obvious choice
 >> but I'd rather solve the problem with design rather than message boxes.
 >
 > But it will not work without JavaScript as you doubtless know.

Of course it does. Without JavaScript, there won’t be any client-side 
checking. That’s it. If the server-side handling has been appropriately 
coded, it will detect the problem and send back an error message. 
Delayed, but still.

 > As I suggested above, provide clear textual instructions to the user.

That’s always a good principle, but it has little to do with the problem 
at hand.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#16666

On Tue, 16 Oct 2012 16:17:53 +1100, Andrew Poulos wrote:

> The user needs to select one or more items. I can't use radio button
> sets because that limits you to only one selected item, but if I use
> checkboxes it means users can have no selected items.
> 
> My options are:
> 
> 1. Use checkboxes and when the user submits the form tell them to make a
> selection if no selection has been made. This seems the obvious choice
> but I'd rather solve the problem with design rather than message boxes.

First of all, you have to code the back end form processing to allow for 
the case that the form gets submitted without any checkboxes selected. 
Your users may not have javascript enabled. Someone might try and attack 
your site using a script that just generates the form as get or post data 
and sends it at the submit url.

Once you have the back end processing sorted (if invalid data is 
submitted, re-present the (partially filled in) form to the user), then 
think about using js to make the front end smarter.

In which case, I think using an onchange handler on all the checkboxes in 
the group to ensure that at least one of them is checked and display an 
alert when the last one is unclicked might be best?

Example at http://www.sined.co.uk/tmp/checkboxes.htm

You could use any suitable container element.

Note that this particular code will still allow the user to submit 
invalid data, as they would with javascript disabled, it just draws their 
attention to the error.

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#16667

On Tue, 16 Oct 2012 16:17:53 +1100, Andrew Poulos wrote:

> The user needs to select one or more items. I can't use radio button
> sets because that limits you to only one selected item, but if I use
> checkboxes it means users can have no selected items.
> 
> My options are:
> 
> 1. Use checkboxes and when the user submits the form tell them to make a
> selection if no selection has been made. This seems the obvious choice
> but I'd rather solve the problem with design rather than message boxes.

First of all, you have to code the back end form processing to allow for 
the case that the form gets submitted without any checkboxes selected. 
Your users may not have javascript enabled. Someone might try and attack 
your site using a script that just generates the form as get or post data 
and sends it at the submit url.

Once you have the back end processing sorted (if invalid data is 
submitted, re-present the (partially filled in) form to the user), then 
think about using js to make the front end smarter.

In which case, I think using an onchange handler on all the checkboxes in 
the group to ensure that at least one of them is checked and display an 
alert when the last one is unclicked might be best?

Example at http://www.sined.co.uk/tmp/checkboxes.htm

You could use any suitable container element.

Note that this particular code will still allow the user to submit 
invalid data, as they would with javascript disabled, it just draws their 
attention to the error.

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#16668

Andrew Poulos wrote:

> The user needs to select one or more items. I can't use radio button
> sets because that limits you to only one selected item, but if I use
> checkboxes it means users can have no selected items.
> 
> My options are:
> 
> 1. Use checkboxes and when the user submits the form tell them to make a
> selection if no selection has been made. This seems the obvious choice
> but I'd rather solve the problem with design rather than message boxes.

You can and should mark obvious errors in the form *before* the form has 
been submitted.  The "message box" could then be limited to a friendly 
reminder in the document.

> 2. Use checkboxes and don't let the user uncheck the last checked
> checkbox in the set. This means that a checkbox may not behave as
> expected.

You could record the first unchecked/checked checkbox and check/uncheck that 
when a third checkbox is about to be unchecked/checked.  However, it is 
probably best to display a message explaining why selecting no item or too 
many items does not make sense, if and when the user tried to do that.  And 
to prevent submission of the form when an obviously erroneous form is about 
to be submitted, and explaining – by marking the errors – why submitting it 
has failed.
 
> Or is there some other control that I can create/design that is
> intuitive to use to achieve the same thing?

There is also

  <select … multiple>
    <option …>
    …
  </select>

But if your users are using a pointing device, they will probably need a 
keyboard also, in particular the Ctrl/Cmd or Space key.  So this is not as 
accessible as the solution above, maybe not as intuitive and could well be 
considered overkill for a short list of options.


PointedEars
-- 
> If you get a bunch of authors […] that state the same "best practices"
> in any programming language, then you can bet who is wrong or right...
Not with javascript. Nonsense propagates like wildfire in this field.
  -- Richard Cornford, comp.lang.javascript, 2011-11-14

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web