使用js实现复选框checkbox类似单选按钮radio的代码

使用JS实现复选框模拟单选按钮功能

最新推荐文章于 2022-05-24 19:36:57 发布

原创最新推荐文章于 2022-05-24 19:36:57 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现复选框（checkbox）在点击时模仿单选按钮（radio）的效果。通过编辑`editCheckboxTrue`函数，当点击任一复选框时，会取消所有其他复选框的选中状态，只保留当前被点击的复选框为选中。这种方法适用于需要限制用户只能选择一个选项的场景。

使用js实现复选框checkbox类似单选按钮radio的代码

效果图

点击复选框，实现单选框的效果
在这里插入图片描述

html 代码


<table id="question_answer_table" width="100%" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
        <td align="center">
            <!--此处后期可以增加多选项，根据问题类型，是多选还是单选，判断用的按钮-->
            <input name="is_true[1]"
                   type="checkbox"
                   onclick="editCheckboxTrue(0,this)"
                   class="checkbox">
        </td>
    </tr>
    <tr>
        <td align="center">
            <!--此处后期可以增加多选项，根据问题类型，是多选还是单选，判断用的按钮-->
            <input name="is_true[2]"
                   type="checkbox"
                   onclick="editCheckboxTrue(0,this)"
                   class="checkbox"
                   checked="checked">
        </td>
    </tr>
    <tr>
        <td align="center">
            <!--此处后期可以增加多选项，根据问题类型，是多选还是单选，判断用的按钮-->
            <input name="is_true[3]"
                   type="checkbox"
                   onclick="editCheckboxTrue(0,this)"
                   class="checkbox">
        </td>
    </tr>
    </tbody>
</table>

js代码

    //修改复选框，实现单选框效果
    function editCheckboxTrue(that) {
        var answer_checkbox_list = $('#question_answer_table input[type=checkbox]');
        var answer_checkbox_lenth = answer_checkbox_list.length;
        //循环得到此次
        for (var i = 0; i < answer_checkbox_lenth; i++) {
            answer_checkbox_list[i].checked = false;
        }
        that.checked = true;
    }