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

Question

我不确定我的标题是否正确。但我的观点是：

我想替换标准 checkox，例如：

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

有一些东西可以让我点击文本（如上面代码中的“选择”）并通过点击它我会选择“sel”属性并使该文本变为粗体。再次单击它会取消选择它并取消粗体文本。A 不想勾选以显示。

想法？我想到了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">