纯JS实现多个checkbox一键全选/全不选（其实主体是第一次参加面试的体会与吐槽 _(:з」∠)_ ）

46 阅读 0 评论 31 点赞

我是靠谱客的博主虚幻美女，最近开发中收集的这篇文章主要介绍纯JS实现多个checkbox一键全选/全不选（其实主体是第一次参加面试的体会与吐槽 _(:з」∠)_ ），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天第一次去面试，被面试官给教育了。

他让我写个checkbox一键全选的功能。

说实话，我没用过checkbox，当初在W3C上面学HTML标签的时候我基本上只看了个大概，了解了下常用标签的语义，而<input>我也只记住了text，password，submit这几个常用的type类型，具体的其他属性就更别提了（别学我，该记得还是要记），所以被问到checkbox的时候我当时就有点楞，都还没反应过来checkbox是什么。于是我很傻的问了下大佬checkbox是干啥的，结果也被大佬还以看傻子的眼神，告知了这是最常用复选框，可以在后面打勾的那种，更具体的他也没说。

听完很是羞愧，也不好意思多问。我当时隐约记得radio对象是用来表示单选按钮的，那checkbox估计跟radio也差不多，所以我就写了几个input标签：

<input type="checkbox" class="cb">
<input type="checkbox" class="cb">
<input type="checkbox" class="cb">
<button id="btn">全选</button>

接下来，如何实现全选功能呢？当checkbox被点击选中时，会改变什么属性来表示它是选中状态呢？我根据radio推测checkbox应该也是由checked属性表示是否选中，所以我决定遍历每个checkbox，当他没有checked或者checked为false时，把这个checkbox的checked设置为true，有的话就改成false，相当于取消了勾选。根据这个思路我写出了具体逻辑：

var cb = document.querySelectorAll(".cb");
var btn = document.querySelector("#btn");
btn.addEventListener("click",selectAll);
function selectAll () {
	for (var i = 0; i < cb.length; i++) {
		if (!cb[i].checked){
			cb[i].checked = true;
		}else {
			cb[i].checked = false;
		}
	}
}

代码写出来了，我点击按钮，所有未选中的复选框全部被选中，再次点击则全部取消。然而经过测试，当我在点击按钮之前如果已经勾选了复选框的话，点击之后未被勾选的会被选中，已经勾选的则会取消。与其说是全选，倒不如说是反选，把每个复选框取反。

当时我的思路到这就结束了，一时半会也想不出改进的方法。接着我又经历了一连串的灵魂拷问，比如：你从小到大吃过苦没，感觉最苦的事情是什么？；你人生中最大的挫折是什么？你看过几本专业书？嗯，看了这么多书肯定有自己的收获和感悟吧，你说说看你在这本专业书里面感悟最多印象最深刻的一段话。

妈耶，我只是一个第一次参加面试的小白，这些灵魂拷问我是真的不知道该如何现场作答，如果你让我在一个夜深人静的夜晚，好好回首一下过去，诘问自己的灵魂，或许我能回忆起一两段让我觉得颇有感触的人生剪影。但是，在那种环境下，你突然让我忆苦思甜畅谈人生，算了不说了，自闭了。还有，让我从专业书里面找一段感悟最多的话，说实话，把书放我面前，我也只能感情饱满的朗诵一下作者序言，现在你让我章口就来，抱歉，我真的做不到。

显而易见，面试应该挂了，不过通过这次面试，我也收获了很多，也好好反思了一下自己，整理了一下自己的心态。谢谢那位面试我的大佬，感觉人还是挺好的，在我反问关于吃苦的问题时，他也给我很诚挚的讲述了一下那个年代的一些故事，确实感觉很不容易。

emmmm，下次加油吧，至少我感觉我人际沟通方面还行，说话也比较有条理，没啥结巴的地方，给自己鼓掌~啪啪啪~~~

最后的最后，我换了一种思路，重新写了一下一键全选/全不选的代码：

<script>
var cb = document.querySelectorAll(".cb");
var btn = document.querySelector("#btn");
btn.addEventListener("click",selectAll);
var flag = true;
function selectAll () {
	var foo = cb.length;
	if(flag){
		for (var i = 0; i < foo; i++) {
			cb[i].checked = true;
			flag = false;
		}
	}else {
		for (var i = 0; i < foo; i++) {
			cb[i].checked = false;
			flag = true;
		}
	}
}
</script>

这次的功能逻辑就正常啦~，不过这个flag该怎么封装一下呢？个人感觉放在全局环境里只给一个函数使用不太好吧。但是把它放到selectAll里面初始化感觉也不对，头疼，等我翻下资料，有思路了再改吧。

以上，ありがとうございます！