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);
});