站长资源
全栈工程师站点

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

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

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

首先我们写好基础的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原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 分步骤讲解复选框的选中、全选、全不选、反选以及取值

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 分步骤讲解复选框的选中、全选、全不选、反选以及取值

评论 抢沙发

评论前必须登录!