用粗体标题替换复选框选择

Question

我不确定我的头衔是否合适。但我的观点是：

我想替换标准的checkox，例如：

Select <input type="checkbox" name="sel" />

有一些女巫会允许我点击文字（如上面代码中的“选择”），点击它我会选择'sel'属性并使这个文字变为粗体。再次单击它将取消选择它并展开文本。 A不想显示checkox。

想法？我想到了javascript，但我不知道如何。

Answer 1

使用标签节点。

<label>
  Select 
  <input type="checkbox" hidden="true"
    onclick="parentNode.style.fontWeight=checked?'bold':'';" />
</label>

此致

Answer 2

您可以使用css在chrome中定义文本。

<style> 
input:before{content:attr(myTextAnno)}
input:checked{font-weight:bold;}
</style>
<input type="checkbox" myTextAnno="Select">

您可以使用css在所有浏览器中定义文本。

<style> 
input:before{content:'Select'}
input:checked{font-weight:bold;}
</style>
<input type="checkbox">