<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>checkbox</title>
<script src="bin/jquery.min.js"></script>
<script>
$(function(){
// 全选/全不选
$("#checkAll_2").click(function(){
$(":checkbox[name='items']").attr("checked", $(this).is(":checked"));
});
$(":checkbox[name='items']").click(function(){
// alert($(":checkbox[name='items']").length); //全选中的个数
// alert($(":checkbox[name='items']:checked").length );//当前选中的个数
var flag = $(":checkbox[name='items']").length == $(":checkbox[name='items']:checked").length ;
$("#checkAll_2").attr("checked", flag);
});
//全选
$("#checkAll").click(function(){
$(":checkbox[name='items']").attr("checked" , "checked");
});
//全不选
$("#checkNo").click(function(){
// $(":checkbox[name='items']").attr("checked" , "");
$(":checkbox[name='items']").removeAttr("checked");
})
// 反选
$("#checkRev").click(function(){
$(":checkbos[name='items']").each(function(){
if($(this).is(":checked")){
$(this).removeAttr("checked");
} else {
$(this).attr("checked", "checked");
}
})
});
});
</script>
</head>
<body>
<form>
你最爱好的运动是? <br>
<input type="checkbox" id="checkAll_2">全选/全不选
<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="蓝球">蓝球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<br>
<input type="button" id="checkAll" value="全选">
<input type="button" id="checkNo" value="全不选">
<input type="button" id="checkRev" value="反选">
<input type="button" id="send" value="提交">
</form>
</body>
</html>
分享到：
相关推荐
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
全选/不选"/>全选/全部选 反选"/> </body> </html> ``` 通过这种方式，我们可以为用户提供便捷的全选、全不选和反选功能。这种实现方法结合了jQuery的选择器和事件处理能力以及原生JavaScript的DOM操作，既简单...
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中...
在jQuery中，实现复选框（checkbox）的全选/全不选功能是常见的需求，尤其是在数据筛选、表格操作等场景。本篇文章将详细介绍如何使用jQuery编写一个通用的全选/全不选功能。 首先，我们需要理解jQuery选择器的工作...
本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考，具体如下： 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧，很多时候我们都...
<title>jQuery 复选框全选全不选示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <input type="checkbox" id="selectAll"> 全选 ...
在网页开发中，常常会遇到需要实现复选框（checkbox）的全选、全不选以及单个选择的功能。这里我们主要探讨如何使用原生JavaScript和jQuery来实现这一功能，同时考虑到行内点击选择的效果。本文将详细介绍两种实现...
"jQuery全选"这个主题，就是关于如何使用jQuery实现表格或其他列表元素的全选和反选功能。下面，我们将深入探讨这一知识点，包括相关原理、代码实现以及实际应用。 一、jQuery全选的基本概念 在网页交互中，用户...
在网页开发中，jQuery 是一个广泛使用...通过以上介绍，我们可以利用 jQuery 实现复选框的全选、反选和全不选功能，同时结合表单验证插件，确保用户按照规定进行输入。在实际应用中，可以根据具体需求进行调整和优化。
本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`<input type="checkbox">`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...
在JavaScript和jQuery开发中，全选/反选功能是一个常见的需求，特别是在表格或者多选列表中。当用户点击一个主复选框（如“全选”按钮）时，所有子复选框应相应地被选中或取消选中。然而，在实际应用中，可能会遇到...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果以及Ajax交互...在实际开发中，这种功能还可以扩展，例如，添加多选区间的全选，或者在全选/全不选之外提供反选选项等。
在标题"jQuery实现复选框全选/反选demo源码"中，我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用，比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码，...
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...