在 JavaScript 中獲取核取方塊的值
Shiv Yadav
2023年10月12日
- 在 JavaScript 中檢查是否選中了核取方塊
-
獲取
核取方塊值 -
在 JavaScript 中使用
querySelectorAll()獲取多個選定核取方塊的值 -
使用 JavaScript 中的
getElementById()方法獲取多個選定核取方塊的值
本文將幫助你使用 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>
輸出：
通過執行這段程式碼，我們會得到類似下面的響應，你可以在其中選擇你熟悉的主題。
作者： Shiv Yadav
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn