极客笔记HTML 如何给单选按钮分配一个已选中的初始值
使用HTML的 <input> 元素，我们可以以各种方式从用户获取输入。其中一种方法是通过给用户提供选项来收集输入。我们使用HTML单选按钮来实现此目的，让用户从一系列选项中选择他们的答案。
HTML单选按钮定义了点击时高亮显示的小圆圈。当将标签链接到单选按钮时，点击标签会选择单选按钮。这些按钮通常显示在单选组中（一组描述一组相关选项的单选按钮）。一组单选按钮一次只能选择一个。
输入类型“radio”
单选输入类型显示一个可以由用户切换开和关的单选按钮。单选按钮的显示方式与复选框不同。在创建单选按钮列表时，列表中每个选项的name属性必须相同。这确保了在该组中只能选择一个单选输入。当提交表单时，包括所选的单选按钮对应的value属性的内容。
<input>元素的type属性用于创建单选按钮，如下所示的语法。
单选输入支持以下属性：
- Name： 它表示输入元素的名称。具有相同名称的单选按钮被组合在一起。
-
Value： 它将所选选项的值发送到服务器。
-
Checked： 如果用户没有选择选项，则可以用默认选择一个选项。
有几种方式可以给单选按钮分配初始值。下面讨论了其中的一些方法。
使用“Checked”属性
已选中 属性是一个布尔属性。当存在时，它表示页面加载时应该预先选择或选中<input>元素。
示例
在下面的示例中，我们使用已选中属性以及 value=”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>