前端点击文字，对应的checkbox多选框或radio单选框会自动勾选

左手的ㄟ右手 2024-04-18 18:09 81阅读 0赞

# 一、前情回顾 #

在编辑前端页面时，希望的效果是：点击文字，文字对应的checkbox小框框就会自动勾选，就不用每次都要对着小方格点。radio单选框也想要同样的效果。

# 二、解决方案 #

### **（1）checkbox 多选框** ###

在 input 外加个 label 标签，将for属性设置的和 input 里的id值一样即可，如下：

<div class="easyui-linkbutton">
      <label style="height: 20; font-size: 11px" for="selectOnly"><input type="checkbox"  id="selectOnly" /> 
        只操作选中报表
      </label>
    </div>

或者

<div class="easyui-linkbutton">
       <input type="checkbox"  id="selectOnly" /> 
       <label style="height: 20; font-size: 11px" for="selectOnly"> 
        只操作选中报表
      </label>
    </div>

注意：1、说明文字标签必须使用 label ；

2、for属性指定需要联动 checkbox 的 id 。

### **（2）radio 单选框** ###

radio单选框比较简单，只需要在外边加上 <label></label> 标签即可。