css中的单选怎么做_CSS

上一篇: css字体图标怎么用下一篇:外部css样式不生效怎么办

css中的单选怎么做

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了css中的单选怎么做，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在css中，可以使用radio对象制作单选，只需要在input元素中设置“”样式即可。单选按钮是表示一组互斥选项按钮中的一个；当一个按钮被选中，之前选中的按钮就变为非选中的。

css中的单选怎么做

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

一、单选按钮控件语法

<input name="FruIT" tyPE="radio" value="" />

使用html input标签，name为自定义，type类型为“radio”的表单，

Radio 对象代表 HTML 表单中的单选按钮。

在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。

单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。

您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。

二、radio单选按钮语法案例

html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <;meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="" method="get">
      您最喜欢水果？<br /><br />
      <label><input name="Fruit" type="radio" value="" />苹果 </label>
      <label><input name="Fruit" type="radio" value="" />桃子 </label>
      <label><input name="Fruit" type="radio" value="" />香蕉 </label>
      <label><input name="Fruit" type="radio" value="" />梨 </label>
      <label><input name="Fruit" type="radio" value="" />其它 </label>
    </form>
  </body>
</html>

截图

css中的单选怎么做

推荐学习：css视频教程

以上就是css中的单选怎么做的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的css中的单选怎么做全部内容，希望文章能够帮你解决css中的单选怎么做所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：radio radio

上一篇: css字体图标怎么用下一篇:外部css样式不生效怎么办

猜你在找的CSS相关文章