【转】点击文字就能选中或取消选中复选框checkbox/单选框radio的两种方法

版权声明：本文为CSDN博主「程序媛zcc」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40015157/article/details/110850331
————————————————

效果是点击文字就能选中复选框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>