为什么明明是radio单选框，却可以同时选中多个？

最新推荐文章于 2024-05-23 19:01:31 发布

南宫梦沉

最新推荐文章于 2024-05-23 19:01:31 发布

阅读量5.5k

点赞数 10

分类专栏：细小的知识点

本文链接：https://blog.csdn.net/qq_37823003/article/details/109381687

版权

细小的知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为什么明明是radio单选框，却可以同时选中多个？

原因是：input框中type为radio类型的单选框是否是同一组的判断依据为否拥有同一个name属性值。

详情可以看下面的例子：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

性别：<br/>
 男：<input type="radio" value="男"/><br/>
 女：<input type="radio" value="女"/><br/>

 水果：<br/>
 香蕉：<input type="radio" value="香蕉"/><br/>
 苹果：<input type="radio" value="苹果"/><br/>
 葡萄：<input type="radio" value="葡萄"/><br/>

</body>
</html>

效果如下：
在这里插入图片描述
然后我把性别给上name属性，但是水果不给。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

性别：<br/>
 男：<input type="radio" value="男" name="sex"/><br/>
 女：<input type="radio" value="女" name="sex"/><br/>

 水果：<br/>
 香蕉：<input type="radio" value="香蕉"/><br/>
 苹果：<input type="radio" value="苹果"/><br/>
 葡萄：<input type="radio" value="葡萄"/><br/>

</body>
</html>

效果如下：
在这里插入图片描述
然后我给水果也加上name属性：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

性别：<br/>
 男：<input type="radio" value="男" name="sex"/><br/>
 女：<input type="radio" value="女" name="sex"/><br/>

 水果：<br/>
 香蕉：<input type="radio" value="香蕉" name="fruit" /><br/>
 苹果：<input type="radio" value="苹果" name="fruit"/><br/>
 葡萄：<input type="radio" value="葡萄" name="fruit"/><br/>

</body>
</html>

效果如下：
在这里插入图片描述

南宫梦沉

关注

10
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
为什么明明是radio单选框，却可以同时选中多个？

为什么明明是radio单选框，却可以同时选中多个？原因是：input框中type为radio类型的单选框是否是同一组的判断依据为否拥有同一个name属性值。详情可以看下面的例子：<!DOCTYPE html><html><head></head><body>性别：<br/> 男：<input type="radio" value="男"/><br/> 女：<input type="ra
复制链接

扫一扫