一、Javacript设置全选的方法：首先创建一个HTML示例文件；然后添加script标签并创建js代码；最后通过循环遍历每个checkbox对象，将其checked属性设置为true实现全选功能即可。
案例一：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>全选</title><script>function myAll() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {oneList[i].checked = all.checked;}}function myOne() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {if(oneList[i].checked == false) {all.checked = false;return;}}all.checked = true;}</script></head><body><table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px"><tr><th>全选<input id="all" type="checkbox" onclick="myAll()" /></th><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>总计</th></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>1</td><td>物品A</td><td>￥55</td><td>1</td><td>￥55</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>2</td><td>物品B</td><td>￥70</td><td>1</td><td>￥70</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>3</td><td>物品C</td><td>￥66</td><td>1</td><td>￥66</td></tr></table></body></html>
案例二：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><input type="checkbox" id="selectAll">全选/全不选<ul class="shop"><li><input type="checkbox">苹果</li><li><input type="checkbox">梨</li><li><input type="checkbox">葡萄</li><li><input type="checkbox">香蕉</li></ul><script type="text/javascript">document.getElementById("selectAll").onclick = function() {//this:指的是当前触发单机事件的元素console.log(this.checked)//获取当前全选的选中状态var isChecked = this.checked//获取到所有的水果的复选框var cbs = document.querySelectorAll(".shop input")//通过循环来全选的状态赋值给水果的复选框for (var i = 0; i < cbs.length; i++) {cbs[i].checked = isChecked}}//给所有的水果的复选框绑定单机事件for (var i = 0; i < cbs.length; i++) {cbs[i].onclick=function(){var count=0for(var j=0;j<cbs.length;j++){//判断复选框的选中状态if(cbs[j].checked){count++}}//判断选中的复选框的个数与实际的复选框的个数是否相等if(count==cbs.length){//将全选的复选框的状态改为选中document.getElementById("selectAll").checked=true}else{//将全选的复选框的状态改为选中document.getElementById("selectAll").checked=false}}}</script></body></html>
二、 检查复选框：
<!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>
如果觉得《JavaScript—有关如何实现全选/全不选 检查是否选中了复选框。》对你有帮助，请点赞、收藏，并留下你的观点哦！
