HOWTO · JavaScript
在 JavaScript 中獲取核取方塊的值
本文介紹了在 JavaScript 中獲取核取方塊的值
本頁內容
本文將幫助你使用 JavaScript 檢查是否選中了核取方塊，獲取選中核取方塊的值，以及選擇/取消選擇所有核取方塊。
在 JavaScript 中檢查是否選中了核取方塊
核取方塊有兩種狀態：選中和未選中。
你可以按照這些過程來確定核取方塊的條件。
- 首先，使用
getElementById()或querySelector()之類的DOM 技術來選擇核取方塊。 - 然後，進入核取方塊元素的選中屬性。如果其選中的屬性是實際的，則選中該核取方塊；否則，它不是。
以下程式碼使用 querySelector() 方法顯示了這一點。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
在這個例子中，
首先，你可以建立一個 Html 核取方塊元素。
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
其次，檢查帶有 id #submit 的核取方塊的選中屬性。
const js = document.querySelector('#submit');
console.log(js.checked);
由於未選中該核取方塊，因此控制檯中顯示的結果將為 false。
false
如果選中該核取方塊，它將在控制檯中顯示 true。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes" checked> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
你將在控制檯中看到輸出為 true。
true
獲取核取方塊值
核取方塊 和按鈕 可以在下一頁找到。單擊按鈕時，核取方塊的值將顯示在控制檯視窗上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="payment">
<input type="checkbox" id="payment" name="payment"> Payment
</label>
<button id="bt">Submit</button>
<script>
const js = document.querySelector('#payment');
const bt = document.querySelector('#bt');
bt.onclick = () => {
alert(js.value);
};
</script>
</body>
</html>
無論核取方塊是否被選中，當你獲得核取方塊的 value 屬性時，你總是會獲得 on 字串。
在 JavaScript 中使用 querySelectorAll() 獲取多個選定核取方塊的值
在下一頁可以找到三個核取方塊。當你選擇一個或多個核取方塊並按下按鈕時，將顯示所選核取方塊的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<p>Select your favorite subject:</p>
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
<p>
<button id="bt">Get Selected subject</button>
</p>
<script>
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
</script>
</body>
</html>
下面是它的工作原理。
我們在 HTML 中建立了三個具有相同名稱（顏色）但值不同的核取方塊元素。
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
在 JavaScript 中：
- 首先，將以下內容新增到按鈕的單擊事件處理程式中：
- 其次，使用文件選擇指定的核取方塊。在 click 事件處理程式中，使用 querySelectorAll() 方法：
- 第三，使用選中核取方塊的值建立一個陣列：
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
使用 JavaScript 中的 getElementById() 方法獲取多個選定核取方塊的值
現在你將學習如何使用 getElementById() 方法獲取所有使用者的核取方塊值。看看下面的例子。
<html>
<body>
<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td>
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> <tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>
<script>
function checkAll() {
var inputs = document.querySelectorAll('.ss');
for (var k = 0; k < inputs.length; k++) {
inputs[k].checked = true;
}
}
function getCheckboxValue() {
var sub1 = document.getElementById("s1");
var sub2 = document.getElementById("s2");
var sub3 = document.getElementById("s3");
var sub4 = document.getElementById("s4");
var sub5 = document.getElementById("s5");
var sub6 = document.getElementById("s6");
var result=" ";
if (sub1.checked == true){
var ss1 = document.getElementById("s1").value;
result = ss1 + ",";
}
else if (sub2.checked == true){
var ss2 = document.getElementById("s2").value;
result = result + ss2 + ",";
}
else if (sub3.checked == true){
document.write(result);
var ss3 = document.getElementById("s3").value;
result = result + ss3 + ",";
}
else if (sub4.checked == true){
var ss4 = document.getElementById("s4").value;
result = result + ss4 + ",";
}
else if (sub5.checked == true){
var ss5 = document.getElementById("s5").value;
result = result + ss5 + ",";
}
else if (sub6.checked == true){
var ss6 = document.getElementById("s6").value;
result = result + ss6;
} else {
return document.getElementById("result").innerHTML = "please,select any one";
}
return document.getElementById("result").innerHTML = "You have selected " + result + " subjects";
}
</script>
</body>
</html>
輸出：
通過執行這段程式碼，我們會得到類似下面的響應，你可以在其中選擇你熟悉的主題。
