分步骤讲解复选框的选中、全选、全不选、反选以及取值

我们在制作后台表单的批量操作的时候经常会遇到需要全选，全不选，反选，选择部分等需求，有些刚入门的朋友不是很明白，今天就通过实际案例来给大家想起分析，相信看完此篇内容，大家在遇到类似操作就不会这么恐惧了。

首先我们写好基础的html示例代码

<div>
	<ul>
	    <li>
	        <label>
	            <input type="checkbox" name="items" value="1">
	            1.站长资源
	        </label>
	    </li>
	    <li>
	        <label>
	            <input type="checkbox" name="items" value="2">
	            2.全栈工程师
	        </label>
	    </li>
	    <li>
	        <label>
	            <input type="checkbox" name="items" value="3">
	            3.wordpress主题
	        </label>
	    </li>
	    <li>
	        <label>
	            <input type="checkbox" name="items" value="4">
	            4.dede模板
	        </label>
	    </li>
	    <li>
	        <label>
	            <input type="checkbox" name="items" value="5">
	            5.站长常用软件
	        </label>
	    </li>
	    <li>
	        <label>
	            <input type="checkbox" name="items" value="6">
	            6.网站优化运营
	        </label>
	    </li>
	</ul>
</div>	
<input type="checkbox" id="all">
全选/全不选
<br>
<input type="button" value="全选" id="selectAll">
<input type="button" value="全不选" id="unSelect">
<input type="button" value="反选" id="reverse">
<input type="button" value="获得选中的所有值" id="btn">

这里说个题外话，同一组的checkbox给后台传递数组数据，我们要起同一个name值

首先我们来分析全选/全不选，为何放在一起来讲解，相信稍微有点思考能力的同学也能够了解，只要完成一个，另一个取反就可以，嗯~那就这么干吧

这里为了方便选择元素，我就引入Jquery了，我们学习的只是处理问题的方法思想

引入Jquery:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

现在我们看id=”all”的复选框，当我们选中它的时候，我们让name=”items”的复选框也选中，当我们不选择它的时候，我们让name=”items”的复选框也不选中

代码如下：

$("#all").click(function() {
	var flag = this.checked;
	$("[name=items]:checkbox").each(function() {
		this.checked= flag; 
	});
});

解释：

当我们点击id=”all”的复选框时，我们设置一个变量flag来存放他的当前状态，然后通过each()函数遍历name=”items”的复选框来对其进行赋值，是的一切都是这么简单~~

有了上面的思路，我们来看看全选按钮

代码如下：

$("#selectAll").click(function() {
	$("[name=items]:checkbox").each(function() {
		this.checked = true;
	});
});

不同之处相信大家，也看出来了，因为是全选，所以只需要保证复选框的值全部为true，是不是想到了全不选的实现方法？

全不选代码如下：

$("#unSelect").click(function() {
	$("[name=items]:checkbox").each(function() {
	   this.checked = false;
	});
});

我们再来看反选，反选显然不能用上面的方法了，因为用户可能已经点选了一些，这时候我们需要把用户点选的排除掉，即当前的状态和我们需要的状态是相反的

代码如下：

$("#reverse").click(function() {
	$("[name=items]:checkbox").each(function() { 
		this.checked = !this.checked; 
	});
});

这里用到了一个!符号，即非的意思,始终与当前的状态相反

获取选中的值传递给后台

代码如下：

$("#btn").click(function() {
	var str = "你选中的是：\r\n";
	$("[name=items]:checkbox:checked").each(function() {
		str += $(this).val() + "\r\n";
	});
	alert(str);
});

循环遍历，把选中状态的值全部打印出来。

相信看到这里大家对于全选、全不选、反选以及如何输出选中的值有了一个全面的了解。

本文由站长资源www.wangdahai.cn原创首发，转载请注明出处