购买商品复选框全选单选

最新推荐文章于 2022-04-19 10:55:12 发布

原创最新推荐文章于 2022-04-19 10:55:12 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现全选和单选复选框的功能。通过获取元素并注册点击事件，当全选复选框被选中时，所有商品复选框会同步选中；反之，如果所有商品复选框被选中，全选复选框也会自动选中。此外，还详细描述了利用循环和if语句来判断商品复选框状态的实现过程。

      <table>
				<thead>
				<tr>
					<th><input type="checkbox" id="quan"></td>
					<th>商品</td>
					<th>价格</td>
				</tr>
				</thead>
				<tbody id="xia">
				<tr>
					<td><input type="checkbox"></td>
					<td>iPad</td>
					<td>3000</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>Mac</td>
					<td>8000</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>iPhone</td>
					<td>8000</td>
				</tr>
			</tbody>
		</table>

HTML代码

            //获取元素
			var quans = document.getElementById('quan');
			//先获取xia这个id，然后获取到xia这个id里面所有的input
			var xias = document.getElementById('xia').getElementsByTagName('input');
			//注册点击事件
			quans.onclick = function(){
				//this.checked是当前复选框的状态
				//this当前（函数调用者）
				//checked是复选框的值，是否被选中
				for(var i = 0;i<xias.length;i++){
					//让(下面商品复选框)xias[i]=this.checked
					xias[i].checked = this.checked;
				}
			}

思路：（1）首先，上面的全选复选框选中，下面的所有商品复选框一起选中

获取元素

注册点击事件

this.checked是当前复选框的状态

最后循环让下面的商品复选框=当前复选框的状态（被选中）

       //利用for循环给所有下面复选框注册点击事件
			for(var i = 0;i<xias.length;i++){
				//注册事件
				xias[i].onclick = function(){
					//flag控制全选按钮是否被选中
					var flag = true;
					//每次点击复选框都要循环一次看是不是三个复选框都被选择
					for(var i = 0;i<xias.length;i++){
						//xias[i].checked 代表点击后复选框被选中，但是！代表反义也就是没全选中
						if(!xias[i].checked){
							//全选按钮flag=false
							flag = false;
						}
					}
					//全选按钮等于flag等于true
					quans.checked = flag;
				}
			}

思路（2）如果下面所有商品复选框都被选中，则上面的全选复选框被选中。

利用循环给下面所有商品复选框注册点击事件

定义一个flag变量（控制全选按钮是否被选中）

再利用一个循环，每次点击下面商品复选框都要循环一次看是不是所有复选框都被选中

利用if语句如果商品复选框有一个没被选中，则flag=false

最后全选按钮等于flag等于true，被选中