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

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

Radio Buttons

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

Contents

  Radio Buttons emf <emfril@gmail.com> - 2012-03-01 21:38 -0500
    Re: Radio Buttons "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-03-02 08:49 +0200
      Re: Radio Buttons Swifty <steve.j.swift@gmail.com> - 2012-03-02 09:01 +0000
      Re: Radio Buttons "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-02 14:13 +0000
    Re: Radio Buttons BootNic <bootnic.bounce@gmail.com> - 2012-03-02 01:54 -0500
      Re: Radio Buttons emf <emfril@gmail.com> - 2012-03-02 23:24 -0500
        Re: Radio Buttons "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-03 10:35 +0000
    Re: Radio Buttons Dr J R Stockton <reply1209@merlyn.demon.co.uk> - 2012-03-03 20:26 +0000
      Re: Radio Buttons SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-06 17:48 +0100
        Re: Radio Buttons "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-06 19:06 +0000
        Re: Radio Buttons Dr J R Stockton <reply1210@merlyn.demon.co.uk> - 2012-03-07 19:31 +0000

#12338 — Radio Buttons

Example of radio buttons:

<form name="test">
NBC: <input type="radio" name="station" onClick="theone=0"><br>
CBS: <input type="radio" name="station" onClick="theone=1"><br>
ABC: <input type="radio" name="station" onClick="theone=2"><br>
</form>

Is there a way for a radio button to get checked not only when you click 
directly on it, but also when you click on its legend (in the above 
example NBC: etc.), so it won't be difficult to aim the mouse?

emf

-- 
It ain't THAT, babe! - A radical reinterpretation
https://files.nyu.edu/emf202/public/bd/itaintmebabe.html

[toc] | [next] | [standalone]

#12339

2012-03-02 4:38, emf wrote:

> Example of radio buttons:
>
> <form name="test">
> NBC: <input type="radio" name="station" onClick="theone=0"><br>
> CBS: <input type="radio" name="station" onClick="theone=1"><br>
> ABC: <input type="radio" name="station" onClick="theone=2"><br>
> </form>
>
> Is there a way for a radio button to get checked not only when you click
> directly on it, but also when you click on its legend (in the above
> example NBC: etc.), so it won't be difficult to aim the mouse?

Yes, and you do this in HTML, not JavaScript, by wrapping the text in a 
<label> element that has a for="..." attribute, with a value matching 
the id="..." attribute in the <input> element. Some old browsers do not 
have the functionality of binding texts with fields that way, but I 
would not bother trying to simulate it with JavaScript. (You could add 
an event handler that reacts to clicking on the text, but then you would 
have the problem that the button setting would be toggled twice, on 
browsers that support <label>.)

Moreover, instead of the onclick handlers, just use a value="..." 
attribute. If you need to retrieve the radio button setting in 
JavaScript, you need to use a loop (or use jQuery or some other 
library), but it's still better than the onclick approach.

Example:

<input type="radio" name="station" value="0" id="nbc"><label 
for="nbc">NBC</label>

It is normal to put the label after the radio button, not before it. 
This is so common that deviating from the practice could confuse people.

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

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

#12341

On Fri, 02 Mar 2012 08:49:18 +0200, "Jukka K. Korpela"
<jkorpela@cs.tut.fi> wrote:

>It is normal to put the label after the radio button, not before it. 

... and I usually interpose a single blank between the <INPUT> tag and
the text.

If you do this, ensure that the space goes INSIDE the <LABEL> tags,
otherwise a near miss when trying to click the button will result in a
miss of the button.

-- 
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

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

#12345

Jukka K. Korpela wrote on 02 mrt 2012 in comp.lang.javascript:

> It is normal to put the label after the radio button, not before it. 
> This is so common that deviating from the practice could confuse people.

It is a falacy to strive for "normal", better go for quality.

Putting the button at the end is quite a good-looking alternative,
if you do a text-align:right; 

Pages in Hebrew or Arabic look quite nice that way too.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#12340

[Multipart message — attachments visible in raw view] — view raw

On Thu, 01 Mar 2012 21:38:38 -0500
emf <emfril@gmail.com> wrote:

> Example of radio buttons:
> 
> <form name="test">
> NBC: <input type="radio" name="station" onClick="theone=0"><br>
> CBS: <input type="radio" name="station" onClick="theone=1"><br>
> ABC: <input type="radio" name="station" onClick="theone=2"><br>
> </form>
> 
> Is there a way for a radio button to get checked not only when
> you click directly on it, but also when you click on its legend
> (in the above example NBC: etc.), so it won't be difficult to aim
> the mouse? 

<label for="in0" style="padding:0.3em;cursor:pointer;">
NBC: 
<input id="in0" type="radio" name="station">
</label>


-- 
BootNic                                                Fri Mar 2, 2012 01:54 am
  "The POP3 server service depends on the SMTP server service, which failed to
  start because of the following error: The operation completed successfully."
  *Windows NT Server v3.51*

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

#12357

On 2012-03-02 01:54 BootNic wrote:
> On Thu, 01 Mar 2012 21:38:38 -0500
> emf<emfril@gmail.com>  wrote:
>
>> Example of radio buttons:
>>
>> <form name="test">
>> NBC:<input type="radio" name="station" onClick="theone=0"><br>
>> CBS:<input type="radio" name="station" onClick="theone=1"><br>
>> ABC:<input type="radio" name="station" onClick="theone=2"><br>
>> </form>
>>
>> Is there a way for a radio button to get checked not only when
>> you click directly on it, but also when you click on its legend
>> (in the above example NBC: etc.), so it won't be difficult to aim
>> the mouse?
>
> <label for="in0" style="padding:0.3em;cursor:pointer;">
> NBC:
> <input id="in0" type="radio" name="station">
> </label>

Thanks a lot to all.  emf

-- 
It ain't THAT, babe! - A radical reinterpretation
https://files.nyu.edu/emf202/public/bd/itaintmebabe.html

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

#12360

emf wrote on 03 mrt 2012 in comp.lang.javascript:

> On 2012-03-02 01:54 BootNic wrote:
>> On Thu, 01 Mar 2012 21:38:38 -0500
>> emf<emfril@gmail.com>  wrote:
>>
>>> Example of radio buttons:
>>>
>>> <form name="test">
>>> NBC:<input type="radio" name="station" onClick="theone=0"><br>
>>> CBS:<input type="radio" name="station" onClick="theone=1"><br>
>>> ABC:<input type="radio" name="station" onClick="theone=2"><br>
>>> </form>
>>>
>>> Is there a way for a radio button to get checked not only when
>>> you click directly on it, but also when you click on its legend
>>> (in the above example NBC: etc.), so it won't be difficult to aim
>>> the mouse?
>>
>> <label for="in0" style="padding:0.3em;cursor:pointer;">
>> NBC:
>> <input id="in0" type="radio" name="station">
>> </label>
> 
> Thanks a lot to all.  emf

There is no need to have the input in the label clause.

If the lable immedialty follows the input,
modern css the + functionality to do nice things
previously needing javascripted events:

===========================

<style type='text/css'>
input[type='radio']:checked+label {background-color:#faa;}
</style>

<input type='radio' id = 'r1' name='r'>
<label for='r1'> [click here] </label>
<br>
<input type='radio' id = 'r2' name='r'>
<label for='r2'> [click here] </label>
<br>

===========================


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#12383

In comp.lang.javascript message <jipbof$ptp$1@speranza.aioe.org>, Thu, 1
Mar 2012 21:38:38, emf <emfril@gmail.com> posted:

>
>Is there a way for a radio button to get checked not only when you
>click directly on it, but also when you click on its legend (in the
>above example NBC: etc.), so it won't be difficult to aim the mouse?

The standard way is with label.

The following, tested only in Firefox 10.0.2, Win XP sp3, shows how a
much larger area can be provided; doubtless someone will tell you how to
prevent two alerts if the actual button is hit.

        <form name=fred onclick="Boo(this)"
         style="background:lime; text-align:center;""
        <br><br><br><br><br><br>
        <input type=radio name=tony
         onClick="alert('radio onclick speaking!')">
        <br><br><br><br><br><br>
        </form>

        <script>
        function Boo(F) { F.tony.click() }
        </script>

There should be a way to style the size of radiobuttons and checkboxes,
but I've not found it.

One could emulate large buttons and boxes by using suitable Unicode
characters in another type of element, perhaps even an ordinary button.

-- 
 (c) John Stockton, Surrey, UK.  ?@merlyn.demon.co.uk   Turnpike v6.05   MIME.
   Web  <http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
 Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
 Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)

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

#12438

Le 03/03/12 21:26, Dr J R Stockton a écrit :
>
> There should be a way to style the size of radiobuttons and checkboxes,

No, most of browsers do not accept we style those buttons
(and even tags button except if you prefer an ugly thing)


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

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

#12445

SAM wrote on 06 mrt 2012 in comp.lang.javascript:

> Le 03/03/12 21:26, Dr J R Stockton a écrit :
>>
>> There should be a way to style the size of radiobuttons and checkboxes,
> 
> No, most of browsers do not accept we style those buttons
> (and even tags button except if you prefer an ugly thing)

Most modern browsers, but for IE, do:

<http://hannivoort.org/test/checkbox.asp>

IE will need Javascript.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#12483

In comp.lang.javascript message <4f563feb$0$12520$ba4acef3@reader.news.o
range.fr>, Tue, 6 Mar 2012 17:48:43, SAM <stephanemoriaux.NoAdmin@wanado
o.fr.invalid> posted:

>Le 03/03/12 21:26, Dr J R Stockton a écrit :
>>
>> There should be a way to style the size of radiobuttons and checkboxes,
>
>No, most of browsers do not accept we style those buttons
>(and even tags button except if you prefer an ugly thing)

In spoken English, "There should be" can express, depending on how it is
pronounced, either optimistic expectation that there is, or deprecated
expectation that there is not.  I was using the latter sense.

Since those controls are generally used in-line with formal or informal
labels, the HTML+CSS specifications should say that by default they are
treated as if they were squares into which an upper-case letter of the
current font would just fit, with that alterable in all the usual ways
by CSS.  Also, their glyphs should be selectable in the same manner as
list-blobs are.

One should not need to use images.  The mark ought to be selectable as a
character in the current, or styled font; most choices would be
unreasonable, but many would not.

After all, "input type=button" can be styled like any other text.

BTW, window.find() is amusing in its cross-browser variants.

-- 
 (c) John Stockton, nr London, UK.    ?@merlyn.demon.co.uk     Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [standalone]

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

csiph-web