資料結構
網路
關係資料庫管理系統 (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 次瀏覽
廣告