只要确保标签与输入相关联。

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

您还可以使用CSS伪元素(分别)从所有复选框的值属性中选择和显示标签。 编辑:这将只适用于webkit和闪烁基于浏览器(Chrome(ium)， Safari, Opera....)，因此大多数移动浏览器。这里不支持Firefox或IE。 这可能只在嵌入webkit/blink到你的应用程序时有用。

所有的伪元素标签都是可点击的。

{后(type =复选框): 内容:attr(价值); 边距:-3px 15px; vertical-align:最高; 空白:nowrap;} 显示:inline-block; ｝ <input type="checkbox" value="My checkbox label value" />

演示:http://codepen。io/mrmoje/pen/oteLl， +它的要点

使用这个

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />