HTML DOM 单选按钮对象


HTML DOM Input radio 对象与 type 为“radio”的 <input> 元素相关联。我们可以分别使用 createElement() 和 getElementById() 方法来创建和访问 type 为 radio 的 input 元素。

属性

以下是 Input Radio 对象的属性:

序号属性及描述
1autofocus
设置或返回单选按钮在页面加载时是否应自动获得焦点。
2checked
设置或返回单选按钮的选中状态。
3defaultChecked
返回单选按钮的 checked 属性的默认值。
4defaultValue
设置或返回单选按钮的默认值。
5disabled
设置或返回单选按钮是否应被禁用。
6form
返回包含单选按钮的表单的引用。
7name
设置或返回单选按钮的 name 属性值。
8required
设置或返回在提交表单之前是否必须选中单选按钮。
9type
返回单选按钮的表单元素类型。
10value
设置或返回单选按钮的 value 属性的值。

语法

以下是创建 Input radio 对象的语法:

创建单选按钮对象。

var R = document.createElement(“INPUT");
R.setAttribute("type", "radio");

示例

让我们来看一个 Input radio 对象的示例:

在线演示

<!DOCTYPE html>
<html>
<head>
<script>
   function createRadio() {
      var R = document.createElement("INPUT");
      R.setAttribute("type", "Radio");
      document.body.appendChild(R);
   }
</script>
</head>
<body>
<h1>Input radio object</h1>
<p>Create an input field with type radio by clicking the below button</p>
<button type=”button” onclick="createRadio()">CREATE</button>
<br><br>
Mango:
</body>
</html>

输出

这将产生以下输出:

点击“创建”按钮后:

在上面的例子中:

我们创建了一个名为“创建”的按钮,当用户点击它时,将执行 createRadio() 方法。

<button type=”button” onclick="createRadio()">CREATE</button>

createRadio() 方法使用 document 对象的 createElement() 方法通过传递“INPUT”作为参数来创建 <input> 元素。新创建的 input 元素被赋给变量 R,并使用 setAttribute() 方法创建一个 type 属性,其值为 radio。

请记住,setAttribute() 方法会在属性不存在时创建属性并赋值。最后,使用 document body 的 appendChild() 方法将 type 为 radio 的 input 元素作为 body 的子元素附加。

function createPASS() {
   var R = document.createElement("INPUT");
   R.setAttribute("type", "Radio");
   document.body.appendChild(R);
}

更新于:2021年2月15日

126 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告