checkbox(复选框)和radio(单选按钮)的区别与详解

最新推荐文章于 2024-03-08 09:11:52 发布
最新推荐文章于 2024-03-08 09:11:52 发布
阅读量9.9w 收藏 206
点赞数 102
分类专栏： 前端 文章标签： checkbox 复选框 radio 单选按钮 区别与详解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WinstonLau/article/details/88539430
版权

选中和取消

  • 选中一个 checkbox(复选框) 后，再次点击它，即可取消选中
  • 选中一个 radio(单选按钮) 后，再次点击它，不能取消选中
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox和radio</title>
</head>
<body>
    <fieldset>
        <legend>选中和取消演示</legend>
        <input type="checkbox"> <br>
        <input type="radio"> <br>
    </fieldset>
</body>
</html>

checkbox“单选”和多选

  • 默认情况下（不设置name属性时），是点了几个 checkbox 就有几个 checkbox 被选中，所以严格来说，要实现 checkbox 的“单选”，就只能点击一个 checkbox，如果点击了多个 checkbox，就必有相应个数的 checkbox 被选中

  • 如果要实现只能同时选中一个 checkbox，可以用 js 代码来控制

  • 也就是说，checkbox 所谓的“单选”是不受其 name 属性的值的影响的，具体可以看下面的演示和代码
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox和radio</title>
</head>
<body>
    <fieldset>
        <legend>每个checkbox的name属性值都不一样</legend>
        <input type="checkbox" name="cb1" value="">苹果 <br>
        <input type="checkbox" name="cb2" value="">香蕉 <br>
        <input type="checkbox" name="cb3" value="">梨子 <br>
    </fieldset>
    <br>
    <fieldset>
        <legend>每个checkbox的name属性值都一样</legend>
        <input type="checkbox" name="cb4" value="">草莓 <br>
        <input type="checkbox" name="cb4" value="">橘子 <br>
        <input type="checkbox" name="cb4" value="">甘蔗 <br>
    </fieldset>
</body>
</html>

radio单选和多选

  • 默认情况下（不设置name属性时），也是点了几个 radio 就有几个 radio 被选中，并且选中后再次点击不可取消选中，除非重置或者刷新页面等

  • 但 radio 既然是单选按钮，肯定是可以实现单选的操作的，这时只要设置每个 radio 的 name 属性的值一样就可以实现单选操作，也就是始终只会有一个 radio 被选中

  • 要实现 radio 的多选操作，除了前面说的默认情况以外，还可以通过设置其 name 属性的值不相同来实现

  • 如果有三个 radio 按钮，前两个的 name 属性的值是一样的，但第三个和前两个不一样，则前两个 radio 按钮，只能同时选中一个，第三个 radio 按钮可以和第一个或第二个同时被选中
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox和radio</title>
</head>
<body>
    <fieldset>
        <legend>每个radio都没有设置name属性值（默认情况）</legend>
        <input type="radio" value=""> <br>
        <input type="radio" value=""> <br>
        <input type="radio" value=""> <br>
    </fieldset>
    <br>
    <fieldset>
        <legend>每个radio的name属性值都不一样</legend>
        <input type="radio" name="r1" value=""> <br>
        <input type="radio" name="r2" value=""> <br>
        <input type="radio" name="r3" value=""> <br>
    </fieldset>
    <br>
    <fieldset>
        <legend>每个radio的name属性值都一样</legend>
        <input type="radio" name="r4" value=""> <br>
        <input type="radio" name="r4" value=""> <br>
        <input type="radio" name="r4" value=""> <br>
    </fieldset>
</body>
</html>
WinstonLau
关注
  • 102
    点赞
  • 踩
  • 206
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
checkbox组件.zip
08-20
基于vue的element组件Checkbox多选框【竖向多列】展示
一款纯css3实现简单的checkbox复选框和radio单选框
09-25
主要为大家介绍了利用纯css3实现一款简单实用的checkbox复选框和radio单选框，代码简单易懂，可以直接复制，感兴趣的可以进来看看哦
CheckBox的创建、监听与继承
Lishaoyin
04-03 1966
目录简介CheckBox的创建使用xml布局创建使用Java代码创建CheckBox的监听CheckBox的继承 简介 CheckBox是复选按钮。 CheckBox的创建 使用xml布局创建 使用Java代码创建 CheckBox的监听 CheckBox的继承 ...
html的单选，多选和复选框及差异
最新发布
dhshsness的博客
03-08 247
checkbox是复选框，但是也可以用于多选绑定，由下面的代码可以看出，多选绑定，和复选是有区别的，checkbox用于多选上，是可以进行绑定的，如果id与下面lable输出的不同，是没有办法运行的。目前咱们在网上遇到过许多，关于html写出来的网页，其中就有我们很常见的性别选择，以及兴趣爱好的填写。radio是单选按钮，但是暂时在选取了之后，是没有办法取消的。后期我会给大家更新能取消的单选按钮。从上到下依次就是单选，多选，和复选了。首次更新，不好勿喷......
WPF 控件专题 CheckBox 控件详解
^@^lemon tea^@^
07-22 9191
WPF 控件专题 CheckBox 控件详解
纯css3实现效果超级炫的checkbox复选框和radio单选框
01-19
之前为大家分享了好多css3实现的按钮。今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框，效果超级炫。先让我们看看图吧!   源码下载这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下: <div xss=removed> <label> <input type=”checkbox” class=”option-input checkbox” checked=””> Checkbox </label> <label> <input type=”checkbox” cl
在Android中使用Anntation来代替ENUM的方法
01-06
本文介绍了在Android中使用Anntation来代替ENUM的方法，分享给大家，具体如下： 如何代替 众所周知，在Android 开发中是不推荐使用java 中的ENUM 来编程的。因为ENUM 中每一个value 都会是一个Object 对象。跟常量的int和String 相比，占用的内存要大的多。 那么，如果我们在定义一些常量的时候，如何限制用户的输入呢？ 举个例子： 如果用ENUM, 我们一般定义一年中的四个季节如下： public enum Season { SPRING, SUMMER, FALL, WINTER } 改用自定义常量的方式： public class
你真的了解checkbox的用法吗？
程序羊的博客
10-31 8247
一、checked属性定义 先了解下input标签的checked属性： 1、HTML之 <input> 标签的 checked 属性 ◆ 定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 checked 属性适用于 <input type="checkbox"> 和 <inpu...
复选框checkbox的三种状态
m0_74265396的博客
07-30 2869
一旦设置checked="false"或者checked = true或者不设置任何值，都会被解释为选中。不设置checked是默认不被选中的，
checkbox 选中触发change事件- 微信小程序开发技术要点总结（二）
Nicolege678的博客
06-28 9776
在待办小程序中，我们通过点选checkbox来表明该事项已完成，也就是说当我们点选该checkbox的时候需要绑定一个触发函数，通过点选事件来触发后续的动作，将值存储起来，这样我们重新进入小程序的时候，待办项的完成情况就还是和上次更新的内容一样。 按照官方文档所说，小程序里面选中单个checkbox，会触发 checkbox-group的change事件，所以我们需要在checkbox标签外面加一个check-group标签。并通过 bindchange 绑定触发事件后的处理函数。H5 代码： js 代
复选框（checkbox）、多选框
qq_27009517的博客
04-28 6532
1、需求分析 可同时选中多个选项，实现全选、全不选、反选等功能。 2、技术分析 基础的HTML、CSS、JavaScript。 3、详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明，列表包含三个部分，整体是一个多选列表，上部是总的选项，下面是具体选项，因此该列表是一个自定义列表： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
checkbox控件使用
Ian22l的博客
05-02 3214
checkbox（复选框），用于多个选择选中或者多个选择不选等情况下使用，例如你喜欢吃的水果可有多种，或者都没有，也可以只有一种。checkbox控件其实就是一个button并附带一个可以检测目前是否被选中的状态变量isChecked，如果被选中isChecked为true,否则为flase. 例如如下的效果图： xml布局 activity_main.xml <?xml version=...
checkbox单选复选按钮美化代码
11-11
checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码
Python简单实现enum功能的方法
01-20
本文实例讲述了Python简单实现enum功能的方法。分享给大家供大家参考，具体如下： class Enumerate(object): def __init__(self,names): for number,name in enumerate(names.split()): setattr(self, name, number) codes = Enumerate('FOO BAR BAZ') print codes.FOO codes.FOO = 10 print codes.FOO 更多关于Python相关内容感兴趣的读者可查看本站专题：《Python So
CSS3实例分享--超炫checkbox复选框和radio单选框
09-25
主要介绍了CSS3实例分享--超炫checkbox复选框和radio单选框,需要的朋友可以参考下
checkbox选中与未选中判断示例
09-04
本节主要介绍了checkbox选中与未选中的判断方法，需要的朋友可以参考下
CSS3实例分享–超炫checkbox复选框和radio单选框
12-13
今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框，效果超级炫。先让我们看看图吧! 这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下:...
input标签的value属性详解
热门推荐
WinstonLau的博客
03-13 5万+
value 属性的用法是由 input 标签的 type 属性的值决定的 当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本 当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值 当 type 的取值为 checkbox、radio、...
el-checkbox复选框改变成单选框，不要用el-radio
05-21
可以通过监听el-checkbox的change事件来实现将el-checkbox改变为单选框的功能。具体实现方式如下： 1. 给每个el-checkbox设置一个唯一的name属性； 2. 监听el-checkbox的change事件，在事件处理函数中，遍历所有的el-checkbox，将除当前点击的el-checkbox外的其他el-checkbox的checked属性均设为false。 以下是示例代码： ```html <template> <div> <el-checkbox v-model="checkedList[0]" name="option1" @change="handleChange">选项1</el-checkbox> <el-checkbox v-model="checkedList[1]" name="option2" @change="handleChange">选项2</el-checkbox> <el-checkbox v-model="checkedList[2]" name="option3" @change="handleChange">选项3</el-checkbox> </div> </template> <script> export default { data() { return { checkedList: [] }; }, methods: { handleChange(checked) { const name = event.target.name; this.checkedList.forEach((item, index) => { if (index !== name) { this.checkedList[index] = false; } }); } } }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值