数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何为单选按钮赋值选中初始值
使用 HTML <input> 元素，我们可以通过多种方式获取用户的输入。其中一种方法是通过提供用户可以选择的多项选项来收集输入。为此，我们使用 HTML 单选按钮，为用户提供各种选项，供他们选择答案。
HTML 单选按钮定义了单击时会高亮显示的小圆圈。当标签链接到单选按钮时，单击标签会选中单选按钮。这些按钮通常显示在单选组中（一组描述一组相关选项的单选按钮）。一组单选按钮一次只能选择其中一个。
输入类型“radio”
单选输入类型显示一个单选按钮，用户可以将其打开或关闭。单选按钮的显示方式与复选框不同。在创建单选按钮列表时，列表中每个选项的 name 属性必须相同。这确保了该组中只能选择一个单选输入。提交表单时，将包含与选定单选按钮对应的 value 属性的内容。
<input> 元素的 type 属性用于创建单选按钮，如下面的语法所示。
单选输入支持以下属性
Name: 它表示输入元素的名称。具有相同名称的单选按钮将组合在一起。
Value: 它将所选项的值发送到服务器。
Checked: 如果用户没有选择任何选项，则用于默认选择一个选项。
我们可以通过几种方法为单选按钮分配初始值。下面讨论其中一些方法。
使用“Checked”属性
checked 属性是一个布尔属性。如果存在，则表示在页面加载时应预先选中或选中 <input> 元素。
示例
在下面的示例中，我们使用带有 value=”checked” 属性的 checked 属性来使任何特定的单选按钮成为默认选择。
<!DOCTYPE html>
<html>
<head>
<title>How to Assign a Checked Initial Value to the Radio Button</title>
</head>
<body>
<h4>Choose the Indian city that is famous for its oranges</h4>
<form id="form" action="/form/submit" method="get">
<div>
<input type="radio" id="hyd" name="city" value="hyd" checked="checked">
<label for="hyd">Hyderabad</label>
</div>
<div>
<input type="radio" id="del" name="city" value="del">
<label for="del">Delhi</label>
</div>
<div>
<input type="radio" id="nag" name="city" value="nag" >
<label for="nag">Nagpur</label>
</div>
<div>
<input type="radio" id="ind" name="city" value="ind">
<label for="ind">Indore</label>
</div>
<br/>
<input type="submit" value="Submit" />
</form>
<script>
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded");
event.preventDefault();
}
</script>
</body>
</html>
示例
在这个例子中，我们使用 checked 属性而不指定任何值来使任何特定的单选按钮成为默认选择。
<!DOCTYPE html>
<html>
<head>
<title>How to Assign a Checked Initial Value to the Radio Button</title>
</head>
<body>
<h4>Which of the following is not a vegetable?</h4>
<form id="form" action="/form/submit" method="get">
<div>
<input type="radio" id="onion" name="vegetable" value="onion">
<label for="onion">Onion</label>
</div>
<div>
<input type="radio" id="tomato" name="vegetable" value="tomato">
<label for="tomato">Tomato</label>
</div>
<div>
<input type="radio" id="bottleguard" name="vegetable" value="bottleguard" checked>
<label for="bottleguard">Bottle-guard</label>
</div>
<div>
<input type="radio" id="pumpkin" name="vegetable" value="pumpkin">
<label for="pumpkin">Pumpkin</label>
</div>
<br/>
<input type="submit" value="Submit" />
</form>
<script>
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded");
event.preventDefault();
}
</script>
</body>
</html>
使用 JavaScript
在这个例子中，我们将使用 JavaScript 来选择一个按钮并将其设置为 true，从而使该按钮成为默认选项。
示例
<!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>How to Assign a Checked Initial Value to the Radio Button</title>
</head>
<body>
<p>Who is the CEO of Microsoft?</p>
<form id="form" action="/form/submit" method="get">
<input type="radio" id="Button1" name="check" />Sundar Pichai
<br>
<input type="radio" id="Button2" name="check" />Satya Nadella
<br>
<input type="radio" id="Button3" name="check" />Elon Musk
<br>
<input type="radio" id="Button4" name="check" />Tim Cook
<br>
<br>
<input type="submit" value="Submit" />
</form>
<script>
let radBtnDefault = document.getElementById("Button4");
radBtnDefault.checked = true;
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded");
event.preventDefault();
}
</script>
</body>
</html>
更新于：2023年9月11日
388 次浏览
广告