Re: Getting checkboxes in HTML output?

[Eric Abrahamsen <eric@ericabrahamsen.net>]

"Sebastien Vauban" <sva-news@mygooglest.com>
writes:

> Achim Gratz wrote:
>> Rick Frankel writes:
>>> For xhtml compatibility, it would need to be 'checked="checked"'. I've
>>> done a quick look at the html dtd, and i does look like input elements
>>> are allowed outside of forms, but i would need to double
>>> check... Also, the fallback to "[-]" for the partially checked state
>>> is a bit inconsistent, perhaps changing background color or other
>>> attributre of the checkbox would be better.
>>
>> I'd much prefer if you'd be using character entities for that since you
>> can't do any input on the HTML anyway (WHITE MEDIUM SQUARE, SQUARE WITH
>> LOWER RIGHT DIAGONAL BLACK and BLACK MEDIUM SQUARE look like good
>> candidates).  That probably makes it UTF-8 only since I don't think
>> these symbols are defined for plain (X)HTML, so for other encodings
>> things should probably stay as they are.
>
> FWIW, here's what I do for the HTML export:
>
> In JS:
>
> #+begin_src js
>   $(function () {
>       $('li > code:contains("[X]")')
>           .parent()
>               .addClass('checked')
>           .end()
>           .remove();
>       $('li > code:contains("[-]")')
>           .parent()
>               .addClass('halfchecked')
>           .end()
>           .remove();
>       $('li > code:contains("[]")')
>           .parent()
>               .addClass('unchecked')
>           .end()
>           .remove();
>   });
> #+end_src
>
> In CSS:
>
> #+begin_src css
>   li.checked {
>       list-style-image: url('../images/checked.png');
>   }
>
>   li.halfchecked {
>       list-style-image: url('../images/halfchecked.png');
>   }
>
>   li.unchecked {
>       list-style-image: url('../images/unchecked.png');
>   }
> #+end_src
>
> with 3 nice pictures of green V, red X, and blue || (line "pause" on
> recorders).

This seems like a much nicer solution -- JS seems semantically more
"right", since what you're doing is toggling display state, not actually
preparing content to input to a form...