• 注册
  • 经验分享 经验分享 关注:4 内容:15179

    单选按钮(RadioButton)常见用法汇总

  • 查看作者
  • 打赏作者
  • Lv.10
    封号会员

    单选按钮(RadioButton)是用户界面中常见的一种交互元素,它允许用户从一组互斥的选项中选择一个,以下是单选按钮的常见用法汇总:

    单选按钮(RadioButton)常见用法汇总
    (图片来源网络,侵删)

    1、基本用法

    属性/方法 说明
    value 设置或获取单选按钮的值
    checked 设置或获取单选按钮是否被选中
    disabled 设置或获取单选按钮是否禁用
    name 设置或获取单选按钮的名称,用于在表单提交时识别
    onChange 设置或获取单选按钮值改变时的回调函数

    2、单选按钮组

    当有多个单选按钮需要表示为一组时,可以使用相同的name属性将它们关联起来,这样,同一时间只能选择一个单选按钮。

    <input type=”radio” id=”option1″ name=”choice” value=”1″>
    <label for=”option1″>选项1</label>
    <input type=”radio” id=”option2″ name=”choice” value=”2″>
    <label for=”option2″>选项2</label>
    <input type=”radio” id=”option3″ name=”choice” value=”3″>
    <label for=”option3″>选项3</label>

    3、禁用单选按钮

    通过设置disabled属性,可以禁用单选按钮,禁用后的单选按钮无法点击,且显示为灰色。

    <input type=”radio” id=”option4″ name=”choice” value=”4″ disabled>
    <label for=”option4″>选项4(禁用)</label>

    4、单选按钮与表单提交

    当用户选择某个单选按钮并提交表单时,该单选按钮的值会作为表单数据的一部分发送到服务器。

    <form action=”/submit” method=”post”>
    <input type=”radio” id=”option5″ name=”choice” value=”5″>
    <label for=”option5″>选项5</label>
    <input type=”submit” value=”提交”>
    </form>

    5、单选按钮与JavaScript交互

    可以使用JavaScript监听单选按钮的change事件,以便在用户更改选择时执行某些操作。

    <input type=”radio” id=”option6″ name=”choice” value=”6″>
    <label for=”option6″>选项6</label>
    <script>
    document.getElementById(“option6”).addEventListener(“change”, function() {
    console.log(“选项6被选中”);
    });
    </script>

    请登录之后再进行评论

    登录
  • 快速发布
  • 任务
  • 实时动态
  • 偏好设置
  • 帖子间隔 侧栏位置: