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

悠悠 2022-09-06 10:20 207阅读 0赞

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

*   *  效果图
     *  html 代码
     *  js代码

## 效果图 ##

点击复选框，实现单选框的效果  
![在这里插入图片描述][0c1b9299d3df408eb5dbdf0d933c1116.png]

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

[0c1b9299d3df408eb5dbdf0d933c1116.png]: /images/20220829/8ec82605a44848f28bdaaf8be88717a8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作

文章目录目录系列文章目录 1.《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用 2.《Vue3实战》用路由实现跳转登录

小咪咪/ 2024年03月23日 22:40/ 0 赞/ 40 阅读

相关 js控制复选框checkbox 只能单选

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf

落日映苍穹つ/ 2022年10月02日 15:52/ 0 赞/ 257 阅读

相关 CheckBox复选框

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

男娘i/ 2022年09月26日 03:15/ 0 赞/ 292 阅读

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

使用js实现复选框checkbox类似单选按钮radio的代码效果图 html 代码 js代码效果图点击复选框，实现

悠悠/ 2022年09月06日 10:20/ 0 赞/ 208 阅读

相关 Android—RadioButton（单选框）和CheckBox（复选框）

一、RadioButton和CheckBox的区别： 1、单个RadioButton在选中后，通过点击无法变为未选中单个CheckBox在选中后，通过点击可以变为未选

待我称王封你为后i/ 2022年07月15日 13:57/ 0 赞/ 489 阅读

相关 bootstrap 复选框及单选按钮

<div class="form-group floating-label"> <label >是否开启RMB购买</label> <

喜欢ヅ旅行/ 2021年12月14日 14:05/ 0 赞/ 463 阅读

相关单选按钮和复选框

单选按钮（RadioButton）和复选按框（CheckBox）都是很常用的组件，尤其是在对话框中。单选按钮（RadioButton）是一种具有排他性的选择组件，用户每一次只能

╰+哭是因爲堅強的太久メ/ 2021年11月29日 11:30/ 0 赞/ 536 阅读

相关复选框checkbox,单击行单选,单击复选框也单选

$('table').on('click', 'tr', function (e) { //选择checkbox判断事件 if (e.t

太过爱你忘了你带给我的痛/ 2021年09月15日 15:10/ 0 赞/ 831 阅读

相关 uniapp 修改radio/checkbox（单选框/复选项）样式大小

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xp

爱被打了一巴掌/ 2021年09月13日 15:42/ 0 赞/ 3775 阅读

相关使用React.js写一个类似单选框与复选框的功能

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

偏执的太偏执、/ 2021年08月30日 22:27/ 0 赞/ 268 阅读