label标签使用，点击文字就能选中或取消选中复选框checkbox/单选框radio的两种方法

效果是点击文字就能选中复选框checkbox/单选框radio 或者是取消选择复选框checkbox/单选框radio。

 

一、单选框

第一种方法：文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。

<div class="radio-inline">
  <input type="radio"  name="killOrder" id="killOrder1" value="1"/>
  <label for="killOrder1">是</label>
</div>
<div class="radio-inline">
  <input type="radio"  name="killOrder" id="killOrder2" value="0" checked/>
  <label for="killOrder2">否</label>
</div>

 

第二种方法：把文字和checkbox包含在<label>标签内

<div class="radio-inline">
  <label><input type="radio" name="killOrder" id="killOrder1" value="1"/>是</label>
</div>
<div class="radio-inline">
  <label><input type="radio" name="killOrder" id="killOrder2" value="0" checked/>否</label>
</div>

 

二、复选框

第一种方法：文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。

<input type="checkbox" id="check1" value="1" checked/><label for="check1">葡萄</label>

 

第二种方法：把文字和checkbox包含在<label>标签内

<label><input type="checkbox" id="check1" value="1" checked/>葡萄</label>