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

一、前情回顾

在编辑前端页面时,希望的效果是:点击文字,文字对应的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>

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值