I've re-implemented the code using <LABEL>, as Anthony advised. http://code.google.com/r/ryo1kato-web2py/source/list?name=better-checkbox2 And demo is updated also http://ryo1kato.appspot.com/checkbox
The code is shorter, but still ugly. But I couldn't figure out how to improve even more, despite I (briefly) studied a little bit more about HTML4, CSS and JavaScript. (hope there's 'parent' selector, and ":checked" support in IE6...) Any idea? -- R.Kato On Tue, Aug 23, 2011 at 23:35, Anthony <abasta...@gmail.com> wrote: > I think using <label for="[input id]">input text</label> would be a good > start (certainly a lot simpler). web2py already uses that to label fields in > SQLFORMs and for the "Remember me" checkbox on login forms. The base.css > even sets the cursor to 'pointer' for all label elements, so you get a > pointer whenever you hover over a label. > > To enable more sophisticated effects (e.g., dynamic style changes), maybe > wrap the <input> and <label> in a <span> container with a special class, as > suggested, and leave it up to the developer to add additional effects via > CSS/jQuery. > > Anthony > > On Tuesday, August 23, 2011 9:44:03 AM UTC-4, ryo1kato wrote: >> >> Well, actually I'm embarrassed that I didn't know about <LABLE>.... >> And yes, I'm pretty sure that the change can be more simple. >> >> Primarily what I want is clickable option value(label) for >> radio/checkboxes. >> Besides, >> * Preferably, more large clickable area (*1) >> * Dynamic style change (as shown on the demo) >> * IE6 support. >> would be good for easy-to-use UI. >> >> Regards, >> --- >> (*1) In my current implementation, <span class="...label"> and <input >> ...> are clickable. >> But I think this is still a bit too small to click. >> Perhaps making "container"(a box containing both <input> and label) >> clickable is more easy-to use. >> (<span class="..._container"> in my example) >> >> On Tue, Aug 23, 2011 at 22:25, Massimo Di Pierro >> <massimo....@gmail.com> wrote: >> > here there is substantial JS to add to web2py_ajax and perhaps we can >> > make it more compact. What is more specifically the problem that you >> > want to solve? Be able to check/uncheck clicking on option value >> > instead of checkbox/radio button? >> > >> > >> > >> > On Aug 23, 6:34 am, ryo1kato <ryo1...@gmail.com> wrote: >> >> Hi, >> >> >> >> I'm frustrated that I can't check/select the checkboxes / radio- >> >> buttons >> >> by clicking on their labels rather than the box/buttons. >> >> So, here's my own solution for web2py, >> >> because I couldn't find any by quick googling. >> >> >> >> *http://bit.ly/nsNAmq(deep link inhttp://code.google.com/) >> >> >> >> * Demo is available on >> >> here:http://ryo1kato.appspot.com/checkbox/default/ >> >> (Tested on IE6, Firefox5,6, GoogleChrome13) >> >> >> >> ...It's quite possible you have better solution, because >> >> I'm pretty new to both web2py and HTML/JavaScript. >> >> However, I'm happy if this feature is supported as web2py's default. >> >> (perhaps by someone's better implementation...) >> >> >> >> -- >> >> R.Kato >> >> -- >> R.Kato > -- R.Kato