html 单选按钮(input radio)

雨点打透心脏的1/2处 2022-10-27 01:39 44阅读 0赞

`<input>` 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>字符串,相同name的radio会成组,选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>布尔值,true表示被选中,false表示未被选中</td> 
  </tr> 
  <tr> 
   <td>defaultChecked</td> 
   <td>布尔值,表示默认被选中</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>字符串,唯一标志,常用来和label的for搭配使用</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>字符串,表示选中时向后端传递的值</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>布尔值,是否被禁用</td> 
  </tr> 
 </tbody> 
</table>

例子:

<div>
      <input type="radio" id="huey" name="drone" value="huey" checked>
      <label for="huey">Huey</label>
      <input type="radio" id="dewey" name="drone" value="dewey">
      <label for="dewey">Dewey</label>
    </div>

label 用来和radio配合,当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

参考:  
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio  
https://www.runoob.com/jsref/dom-obj-radio.html

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关设置第一个单选按钮radio选中

置第一个Radio为选中值： $('input:radio:first').attr('checked', 'checked'); $('input:...

墨蓝/ 2024年04月20日 08:46/ 0 赞/ 106 阅读

相关树形单选框input_radio菜单

效果图 ![在这里插入图片描述][2020070317004031.png] ![在这里插入图片描述][20200703173843737.gif] 需要引用到jqu

柔光的暖阳◎/ 2023年02月22日 12:29/ 0 赞/ 57 阅读

相关 html 单选按钮(input radio)

`<input>` 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。 <t

雨点打透心脏的1/2处/ 2022年10月27日 01:39/ 0 赞/ 45 阅读

相关改变单选按钮radio的默认样式

默认的radio的样式很丑，那么如何改变其默认的样式呢？我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。

蔚落/ 2022年08月22日 00:19/ 0 赞/ 349 阅读

相关 Span模拟单选按钮Radio

![20170209084446488][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

迷南。/ 2022年07月12日 03:24/ 0 赞/ 258 阅读

相关 input radio,改装input单选框样式，单选框input修改默认样式

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

缺乏、安全感/ 2022年04月08日 15:29/ 0 赞/ 396 阅读

相关点击单选按钮radio后面的文字即可选中单选按钮

http://blog.csdn.net/w\_\_yi/article/details/7527926 关键字：radio 单选按钮文字选中有时候我们在

我就是我/ 2022年02月13日 08:39/ 0 赞/ 449 阅读

相关单选radio

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2022年01月27日 00:11/ 0 赞/ 319 阅读

相关自定义样式的radio单选按钮

//自定义单选radio HTML 代码： <label class="defined-label"> <input class="def

曾经终败给现在/ 2021年11月17日 02:00/ 0 赞/ 421 阅读

相关 HTML input radio 单选按钮

`< input>` 标签 type 属性值设置为 "radio"，即可创建一个单选按钮。既然是单选按钮，按钮之间通常互斥，同一时刻只能有一项处于选中状态。 ...

小灰灰/ 2020年05月15日 17:24/ 0 赞/ 1097 阅读