JavaScript实现复选框的全选与取消

<input type="checkbox" id="btn1" />全选/全不选
		<ul class="shop">
			<li><input type="checkbox">苹果</li>
			<li><input type="checkbox">梨</li>
			<li><input type="checkbox">葡萄</li>
			<li><input type="checkbox">香蕉</li>
			<li><input type="checkbox">榴莲</li>
		</ul>

        <script>
			//获取到所有水果的复选框
			var cbs = document.querySelectorAll(".shop input")
			document.getElementById("btn1").onclick = function() {
				//获取当前全选的选中状态
				var isChecked = this.checked
				//通过循环来将全选状态赋值给水果的复选框
				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.lengthe) {
						//将全选的复选框的状态改为选中
						document.getElementById("btn1").checked = true
					} else {
						//将全选的复选框的状态改为取消
						document.getElementById("btn1").checked = false
					}
				}
			}
		</script>