通过纯css而不是javascript来实现。想法来自The Default Checkbox and Radio Button Graphics Are Ugly?，checkbox 和radio 样式效果来自 Adonia 主题。当然，IE是不行的。firefox和opera都没问题。

</p> <style type="text/css"> <p>form#form1 {font:12px tahoma,sans-serif}</p> <p>input[type="checkbox"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}</p> <p>input[type="checkbox"]+label {background:url(images/checkstyle.gif) no-repeat;padding-left:18px;color:#ccc;}</p> <p>input[type="checkbox"]+label:hover {color:#369;background-position:0 -16px;}</p> <p>input[type="checkbox"]:checked+label {color:#000;background-position:0 -48px;}</p> <p>input[type="checkbox"]:focus+label {color:#963;background-position:0 -32px;}</p> <p>input[type="radio"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}</p> <p>input[type="radio"]+label {background:url(images/checkstyle.gif) no-repeat 0 -64px;padding-left:18px;color:#ccc;}</p> <p>input[type="radio"]+label:hover {color:#369;background-position:0 -80px;}</p> <p>input[type="radio"]:checked+label {color:#000;background-position:0 -112px;}</p> <p>input[type="radio"]:focus+label {color:#963;background-position:0 -96px;}</p> </style> <form id="form1"> <input id="check1" type="checkbox" /><label for="check1">选项一</label></p> <input id="check2" type="checkbox" /><label for="check2">选项二</label></p> <input id="check3" type="checkbox" /><label for="check3">选项三</label></p> <input id="check4" type="checkbox" /><label for="check4">选项四</label></p> <hr /> <input name="radioa" id="radio1" type="radio" /><label for="radio1">单选一</label></p> <input name="radioa" id="radio2" type="radio" /><label for="radio2">单选二</label></p> <input name="radioa" id="radio3" type="radio" /><label for="radio3">单选三</label></p> <input name="radioa" id="radio4" type="radio" /><label for="radio4">单选四</label></p> </form> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这个css的精髓在于 + 选择器(Adjacent sibling selectors)的运用。拿到 input[type="checkbox"]后面的 label，并控制其样式。

一开始，我是这样的结构

选项一

我更喜欢 label 在外面，这样顺便可以控制表单的布局（类似于原来 td 的作用）。但是似乎没有这种选择器— 包含b子节点的a，郁闷…谁有什么好建议？