这篇文章主要介绍了css中的单选如何实现，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
在css中，可以使用radio对象制作单选，只需要在input元素中设置“”样式即可。单选按钮是表示一组互斥选项按钮中的一个；当一个按钮被选中，之前选中的按钮就变为非选中的。
本教程操作环境：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()。
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中的单选如何实现”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
