选中/取消选中复选框，而不使用JavaScript / jQuery

Question

是否可以在不使用JavaScript / jQuery的情况下切换输入类型复选框的状态（选中/取消选中），即仅通过HTML和CSS？

说我想点击旁边的标签来切换它。

如果是，我们如何实现这一目标？

Answer 1

如果您需要选中/取消选中<label>的输入，请在输入上设置id，并使用标签for attribute进行连接。

<input type="checkbox" id="chk" />

<label for="chk">Click to check/uncheck</label>

另一个选择是使用标签作为输入的容器：

<label><input type="checkbox" /> Click to check/uncheck</label>

Answer 2

此答案适用于更新前的问题！

仅使用硬编码属性checked：

<input type="checkbox" checked />

如果你想从代码中触发它，没有JS / jQuery就不可能。

Answer 3

标签和输入意味着一起工作：）

请参阅：https://www.w3.org/wiki/HTML/Elements/label

  

标题可以与特定的表单控件相关联：

     

  

• 使用属性[Example A]

  

• 将表单控件放在label元素本身中。 [Example B]

  

<label for="a">toggle state</label><input type="checkbox" id="a"/>

Answer 4

是的，你可以。使用此代码

<label for="MyCheckBox">Click Me !</label>
<input type="checkbox" id="MyCheckBox" />