JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。

本文链接：https://blog.youkuaiyun.com/m0_68758365/article/details/127098120

一、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=0
						
					for(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>