Jquery实现全选和全不选

最新推荐文章于 2024-07-18 11:48:33 发布
最新推荐文章于 2024-07-18 11:48:33 发布
阅读量87 收藏
点赞数
分类专栏： JavaScript jQuery 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/killeraction/article/details/88335838
版权 

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="js/jquery-1.6.1.min.js">
		
	
	</script>
  </head>
  
  <body>
    
    <table id="dataTab">
    <tr>
    	<th>
    		<input type="checkbox"  id="selectCheck" οnclick="selectAll();" value="test"/>
    	</th>
    </tr>
    	<tr>
    		<td>
    		<input type="checkbox" name="box" >
    		</td>
    		<td>
				####    		
    		</td>
    		<td>
    		<input type="checkbox" name="box">
    		</td>
    		<td>
				####    		
    		</td><td>
    		<input type="checkbox"  name="box">
    		</td>
    		<td>
				####    		
    		</td>
    	</tr>
    </table>
    
    <hr/>
    
    
     <table id="dataTab_1">
    <tr>
    	<th>
    		<input type="checkbox"  id="selectCheck_1" οnclick="selectAll_1();" value="test" checked="false"/>
    	</th>
    </tr>
    	<tr>
    		<td>
    		<input type="checkbox"  >
    		<input type="checkbox"  id="testBox" value="复选框" >
    		</td>
    		<td>
				####    		
    		</td>
    		<td>
    		<input type="checkbox" >
    		</td>
    		<td>
				####    		
    		</td><td>
    		<input type="checkbox">
    		</td>
    		<td>
				####    		
    		</td>
    	</tr>
    </table>
  </body>
</html>

<script>
	function selectAll(){
			//alert($("#selectCheck").attr("checked"));
			$.each($("input[name='box']"),function(){
				if($("#selectCheck").attr("checked")){
				$(this).attr("checked",$("#selectCheck").attr("checked"));
				}
				else{
					$(this).removeAttr("checked");
					}
				});

		}

	function selectAll_1(){
		var isChecked=$("#selectCheck_1").attr("checked");
		$("#dataTab_1 tr:gt(0) :checkbox").each(function(){
				if(isChecked){
					$(this).attr("checked","checked");
			}
			else{
				$(this).removeAttr("checked");
				}
			});

		}


</script>
 
killeraction
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
08-jQuery-实现全选和全不选操作
记录java学习日常~
05-24 730
如果有一个未被选中，则不是全部选中，将全选的 checkbox 取消选中；否则全部选中，将全选的 checkbox 选中。这里使用了 prop() 方法来设置 checkbox 的 checked 属性，如果全选的 checkbox 被选中了，则将所有的水果 checkbox 都选中，否则都不选中。然后，我们还可以添加一个点击事件来监测所有的水果 checkbox 是否全部被选中，如果是，则自动将全选的 checkbox 选中，否则不选中。
jquery实现全选和全不选功能效果的实现代码【推荐】
10-22
下面小编就为大家带来一篇jquery实现全选和全不选功能效果的实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
jQuery实现表单全选、全不选以及反选的功能
lep的博客
06-22 4503
本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单：<!-- HTML结构 --> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言：</legend> <fieldset> <p><label class="selectAll"><input type="check
使用JQuery表单选择器,实现全选/全不选/和反选的效果
weixin_42152880的博客
09-09 1048
使用JQuery表单选择器,实现全选/全不选/和反选的效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="js/jquery-1.8.3.js"&
使用JQuery完成表单的全选全不选功能
qq_42675691的博客
08-21 362
使用JQuery完成表单的全选全不选功能 需求分析 ​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理, 技术分析: 导入JQ的包 文档加载完成函数: 页面初始化 获得所有的行 : 元素选择器 根据行号奇数/偶数去修改颜色 代码实现: <!DOCTYPE html> <html> <head> <meta charset="UT...
利用jQuery实现多选框选中与未选中
04-13 481
所用到的知识点： 1、iconfont图标库的运用； 2、改变input的多选框默认的样式，所运用的小知识点利用label标签； <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/...
jQuery实现全选&全不选&非全选
yjy528的博客
02-15 4297
1.点击全选 选中/取消所有复选框 2.取消某一个复选框，全选按钮不选中 3.勾选所有复选框后，全选按钮选中 html <div> <div><input type="checkbox" name="checkbox" />复选框1</div> <div><input type="checkbox" name="checkbox" />复选框2</div> <d
jquery实现全选和全不选功能
热门推荐
php菜鸟技术天地
09-13 1万+
无标题文档     $(document).ready(function () {         $("#checkedAll").click(function () {             //alert("aa");             if ($(this).attr("checked")) { // 全选
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
js实现全选和全不选功能
11-20
在JavaScript编程中，实现全选和全不选功能是一项常见的需求，特别是在涉及到用户界面中包含多个复选框的场景。这个功能允许用户通过一个主复选框来控制其他所有复选框的状态。以下是一个详细的解释和示例代码，用于...
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
JQ checkbox 全选和全不选
06-10
"JQ checkbox 全选和全不选"这个主题聚焦于jQuery如何实现复选框的选择功能，特别是全选和全不选的交互效果。这种功能常见于数据表格或列表的筛选中，允许用户一次性选择或取消选择所有项目。 首先，我们需要了解...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 768
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 411
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 302
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
weixin_44565776的博客
07-18 99
只要掌握了这些react技能，基本就可以熟练使用react了
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 474
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
HOW - SVG 图标组件封装（Lucide React）
最新发布
weixin_58540586的博客
07-18 722
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 148
【代码】vue3配置代理。
react 全选_使用React的Hooks+ts实现全选和全不选？
05-31
可以通过使用React的Hooks和TypeScript来实现全选和全不选功能。下面是一个简单的例子： ```tsx import React, { useState } from "react"; interface Item { id: number; name: string; selected: boolean; } interface Props { items: Item[]; } const SelectAll: React.FC<Props> = ({ items }) => { const [selectAll, setSelectAll] = useState(false); const handleSelectAll = () => { const updatedItems = items.map((item) => ({ ...item, selected: !selectAll })); setSelectAll(!selectAll); // 更新items }; const handleSelectItem = (id: number) => { const updatedItems = items.map((item) => item.id === id ? { ...item, selected: !item.selected } : item ); const allSelected = updatedItems.every((item) => item.selected); setSelectAll(allSelected); // 更新items }; return ( <div> <input type="checkbox" checked={selectAll} onChange={handleSelectAll} /> 全选 {items.map((item) => ( <div key={item.id}> <input type="checkbox" checked={item.selected} onChange={() => handleSelectItem(item.id)} /> {item.name} </div> ))} </div> ); }; export default SelectAll; ``` 在这个例子中，`SelectAll`组件接收一个`items`数组作为props，该数组包含`id`、`name`和`selected`属性。`selectAll`状态用于表示是否全选，初始值为`false`。`handleSelectAll`函数用于处理全选/全不选事件，它会将`items`数组中所有元素的`selected`属性设置为`!selectAll`，并更新`selectAll`状态。`handleSelectItem`函数用于处理单个item的选择事件，它会将选中的item的`selected`属性取反，并检查是否所有的item都被选中，如果是，将`selectAll`状态设置为`true`。最后，`SelectAll`组件渲染一个全选的`checkbox`和一个包含所有`item`的列表，每个`item`都有一个选择`checkbox`，当选中一个`checkbox`时，将触发`handleSelectItem`函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值