html checkbox 实现全选/取消全选

最新推荐文章于 2024-05-15 10:26:31 发布
最新推荐文章于 2024-05-15 10:26:31 发布
阅读量4.1w 收藏 26
点赞数 8
分类专栏： html5 文章标签： checkbox html 全选 取消全选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/graceup/article/details/46650781
版权

html checkbox  实现全选/取消全选




<html>
<body>

	<table border="1">
		<tr>
			<th><input type="checkbox" οnclick="swapCheck()" /></th>
			<th>Month</th>
			<th>Savings</th>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>January</td>
			<td>$100</td>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>February</td>
			<td>$150</td>
		</tr>
	</table>

	<script type="text/javascript"
		src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

	<script type="text/javascript">
		//checkbox 全选/取消全选
		var isCheckAll = false;
		function swapCheck() {
			if (isCheckAll) {
				$("input[type='checkbox']").each(function() {
					this.checked = false;
				});
				isCheckAll = false;
			} else {
				$("input[type='checkbox']").each(function() {
					this.checked = true;
				});
				isCheckAll = true;
			}
		}
	</script>

</body>
</html>



效果图：



graceup
关注
  • 8
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
10-29
"checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项...
html checkbox全选实现
qq_37746647的博客
08-26 1164
html 全选<input id="checkAll" type="checkbox"/> 菜单一<input class="check" type="checkbox"/> 菜单二<input class="check" type="checkbox"/> 菜单三<input class="check" type="checkbox"/> js...
Html中checkbox全选/取消
qq_36996931的博客
03-22 707
1.Html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入Jquery --> <script type="text/javascript" src="js/jquery-1....
大数据H5前端开发——DOM_单击“全选”复选框,同时选中或取消选中运动,唱歌和写代码的复选框(3)
最新发布
2401_84187635的博客
05-15 349
首先，在HTML中定义了几个输入框，其中三个是复选框，用来表示用户的不同爱好，另外一个是全选框，用来实现一键选择全部爱好的功能。接下来，为每个爱好复选框都定义了一个点击事件，当任意一个爱好被选中时，调用check函数来判断是否需要激活提交按钮，并且判断是否需要将全选框的选择状态修改为全部爱好都被选中。然后，定义了点击全选框的事件，当全选框被点击时，将所有的爱好复选框的选择状态都设置成与全选框相同的状态，并且调用了check函数来判断是否需要激活提交按钮。页面有4个复选框和一个按钮，按钮初始化是不可用状态。
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1737
这种情况在购物车中尤为常见
Html checkbox全选
weixin_33989780的博客
03-04 147
html中全选 <table class="data-table td-center"> <tr> <td><input type="checkbox" id="ckAll" name="checkAll" />全选&...
jQuery checkbox全选/取消全选实现代码
12-09
在本示例中，我们将讨论如何使用jQuery实现全选/取消全选的功能，以及如何获取选中复选框的值。 首先，jQuery版本1.3.2被用于这个例子。在HTML部分，我们有多个`<input type="checkbox">`元素，它们共享同一个name...
jquery操作checkbox实现全选和取消全选
10-26
在jQuery中，操作复选框（checkbox）进行全选和取消全选是常见的前端交互功能，主要用于批量选择或批量操作。下面将详细讲解如何利用jQuery实现这一功能。 首先，我们来理解复选框（checkbox）的基本操作。在HTML中...
HTML复选框的全选、全不选以及单选操作。
娜可璐璐的博客
08-05 5669
今天在进行HTML的table练习的时候，发现一个比较有趣的知识点，有关于复选框的全选、全不选，以及单选操作的相关问题。 待我上网搜索了一下相关资料，发现有关于全选以及全不选的详解还是挺多的，但是复选框与全选的联动却很少有人解释。 接下来我就先和大家说说全选以及全不选的相关代码分享。 function checkAll(){ //1.获取编号前面的复选框 var checkAllEle = document.getElementById("bo
Html：实现checkbox全选、非全选、单选
stay hungry ! stay foolish!
11-09 2990
                    Html：实现checkbox全选、非全选、单选   全局选择与单选有以下两点关系： 1、当我把所有单选都选择上的时候，全选应该是被选择状态 2、当我取消一个单选时，全选应该是取消的状态 3、点击全选按钮，所有的单选都被选上；取消全选按钮，所有的单选都被取消 一个很简单的功能，那就直接代码实现了吧 jsp的代码： &lt;table class=...
html实现选择框的全选与反选
小缘同学的博客
09-10 2767
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选和反选</title> </head> <script type="text/javascript"> //页面加载 window.onload = function(){ var checkAll = document.getElementByI
HTML+CSS+JavaScript：全选与反选案例
lbcbjtlhmjq的博客
08-03 679
1、单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中2、当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中。
html中checkbox选中则value为yes，没选中为no
热门推荐
仰望 星空的专栏
11-12 1万+
Sencha Touch/Extjs中用html制作表单 html中checkbox选中则value为yes，没选中为no 1.首先获取所有的input框 var viewPort=Ext.Viewport.down('#视图ID') var inputFields=viewPort.innerElement.dom.querySelectAll
html的取消和选中,checkbox 选中和取消切换问题
weixin_32375895的博客
06-21 1357
最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法，单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。下面根据这篇博文(javascript:mctmp(0);)，简要翻译了.prop()和.attr()的用法：1需朋者说上事是础一发一开程和开数的目前间、...
HTML 中　checkbox 的全选
DrylandFish的专栏
12-14 5338
C1 C2 C3 C4 C5 C6 C7 C8 C9  function checkAll() {     for (var j = 1; j         box = eval("document.checkboxform.C" + j);        if (box.checked == false) box.checked = true;     }  }  function u
html5 checkbox
qq_36158551的博客
10-04 1814
（2）设置checkbox是否选中。
html中checkbox的全选
weixin_30632089的博客
08-01 260
<body><script type="text/javascript" language="javascript">function check(){ var oo=document.getElementsByName("pro"); //通过.getElementsByName()把name为“pro”的复选框定义成集合 for(var i=0;i<oo.len...
HTML5
mikuct的博客
10-30 703
HTML5入门
js实现全选/全不选功能
03-31
HTML代码： ``` <input type="checkbox" id="checkAll">全选/全不选 <br> <input type="checkbox" class="checkbox">选项1 <br> <input type="checkbox" class="checkbox">选项2 <br> <input type="checkbox" class="checkbox">选项3 <br> <input type="checkbox" class="checkbox">选项4 ``` JavaScript代码： ``` var checkAll = document.getElementById("checkAll"); var checkboxes = document.getElementsByClassName("checkbox"); // 全选/全不选按钮点击事件 checkAll.onclick = function() { for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = this.checked; } }; // 单个复选框点击事件 for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].onclick = function() { var checkedCount = 0; for (var j = 0; j < checkboxes.length; j++) { if (checkboxes[j].checked) { checkedCount++; } } checkAll.checked = checkedCount === checkboxes.length; }; } ``` 解释：首先通过 `getElementById` 和 `getElementsByClassName` 方法获取全选/全不选按钮和所有的复选框，然后为全选/全不选按钮和每个复选框分别绑定点击事件。全选/全不选按钮点击事件中，遍历所有复选框，并将它们的 `checked` 属性设置为全选/全不选按钮的 `checked` 属性。单个复选框点击事件中，遍历所有复选框，统计选中的复选框数量，若数量等于所有复选框数量，则将全选/全不选按钮的 `checked` 属性设置为 `true`，否则设置为 `false`。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值