JS checkbox实现单选效果

一. 需求

😒有下列checkbox,但是想让checkbox为单选效果。

<td id="tekurisuBangoCheckBox">
    <input id="jheKeiyakukbn" th:checked="*{jheKeiyakukbn} eq '1'" type='checkbox' style="vertical-align: middle;" />
    <label for="jheKeiyakukbn">契约</label>
    <input id="jheHenkokbn" th:checked="*{jheHenkokbn} eq '1'" type='checkbox' style="vertical-align: middle;" />
    <label for="jheHenkokbn">变更</label>
    <input id="jheKanryokbn" th:checked="*{jheKanryokbn} eq '1'" type='checkbox' style="vertical-align: middle;" />
    <label for="jheKanryokbn">完成</label>
</td>

二. 实现

  1. 在所有的checkbox的最外层,放置一个标签进行包裹,给最外层的的包裹的标签添加click事件。
  2. 当我们点击checkbox的时候,点击事件会冒泡到最外层的包裹标签上,从而触发点击事件。
  3. 当点击事件触发之后,遍历所有的checkbox,全部设置为不选中,仅仅将当前点击的对象设置为选中状态。
$("#tekurisuBangoCheckBox").on("click", function(obj) {
    $("#tekurisuBangoCheckBox").find(":checkbox").each(function(index, chekboxItem) {
    	// 所有的checkbox为非选中状态
        $(chekboxItem).prop('checked', false);
    });
    // 当前点击的checkbox为选中状态
    $(obj.target).prop('checked', true);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值