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

前端点击文字联动Checkbox与Radio

最新推荐文章于 2024-12-06 15:15:24 发布

原创最新推荐文章于 2024-12-06 15:15:24 发布 · 7.5k 阅读

7 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在前端页面中实现点击文字时自动勾选或取消勾选对应的Checkbox和Radio单选框，通过使用Label标签及其for属性，提高用户体验。

一、前情回顾

在编辑前端页面时，希望的效果是：点击文字，文字对应的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" />&thinsp;
    只操作选中报表
  </label>
</div>

或者

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

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

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

（2）radio 单选框

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

<div>
    <label>
        <input type="radio" id="allSelect" name="select" value="allSelect"/> 全选 &nbsp;
    </label>
    <label>
        <input type="radio" id="selected" name="select" value="selected"/> 已选 &nbsp;
    </label>
    <label>
        <input type="radio" id="noSelect" name="select" value="noSelect"/> 不选 &nbsp;
    </label>
    <label>
        <input type="radio" id="waitSelect" name="select" value="noSelect" checked="checked"/> 未选 &nbsp;
    </label>
</div>