1.代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<link href="css/ingrid.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$("document").ready(function(){
$("#all").click(function(){
if(this.checked){
$("input[name='checkbox']").each(function(){this.checked=true;});
$("#btn1").attr("value","反选");
}else{
$("input[name='checkbox']").each(function(){this.checked=false;});
$("#btn1").attr("value","全选");
}
});
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
})
})
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="form1" method="post" action="">
<input type="checkbox" id="all" name="all">
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="checkbox1">
checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">
checkbox2
<input type="checkbox" name="checkbox" value="checkbox3">
checkbox3
<input type="checkbox" name="checkbox" value="checkbox4">
checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">
checkbox5
<input type="checkbox" name="checkbox" value="checkbox6">
checkbox6
<input type="checkbox" name="checkbox" value="checkbox7">
checkbox7
<input type="checkbox" name="checkbox" value="checkbox8">
checkbox8
</form>
</BODY>
</HTML>
2.效果
分享到：
相关推荐
demo46-jQuery全选，反选，取消选择.html
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
很好用的使用jquery来实现的通用的全选反选功能
### 一、jQuery全选 全选功能通常应用于多选列表或表格中，允许用户一次性选择所有选项。在jQuery中，我们可以通过`$("selector").attr("checked", true)`来实现。这里的`selector`是用于选择你想要设置为选中的...
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
全选和反选功能则是复选框常用的一种交互模式，极大地提升了用户体验，特别是当选项数量较大时。本文将深入探讨复选框的全选和反选机制及其在IT中的应用。 全选功能是指用户只需点击一个按钮或复选框，就能同时选中...
页面上通过一个checkbox实现全选与反选
使用jquery实现 checkbox的 全选，反选
在高级控件如DataGridView中，通过结合Checkbox可以实现全选和反选功能，为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...
总之，jQuery的全选、反选和获取选中值是前端开发中常用的功能，熟练掌握这些技巧能够提升用户体验，使得用户在多选操作时更加便捷。通过学习和实践这些例子，你可以在你的网页应用中轻松实现类似功能。
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
在网页开发中，复选框（Checkbox）是一种常见的表单元素，用于用户多选操作。...然而，当处理大量复选框时，全选...通过学习和掌握这些技术，你可以轻松地在项目中实现复选框的全选、反选和获取选中值功能，提升用户体验。
总结来说，"Jquery全选反选Checkbox"是一个提高用户体验的实用功能，通过jQuery的DOM操作和事件处理，我们可以轻松实现全选和反选的效果。而提供的压缩包资源则提供了具体的实现代码，便于开发者学习和使用。
<title>jQuery全选/反选示例 <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> 全选" id="ckAll"/>水果 苹果" id="apple"/>苹果 香蕉" id="bann"/>香蕉 橘子" id="origin"/>...
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
接下来，我们将使用jQuery来实现全选和反选功能。 全选功能可以通过监听全选Checkbox的`change`事件来实现，然后遍历所有子Checkbox并设置其`checked`属性： ```javascript $(document).ready(function() { $('#...
标题“JQ全选和反选和取消”涉及的是jQuery中处理多选元素，如复选框或表格行的选择状态。在这个主题下，我们将深入探讨如何实现全选、反选以及取消选择的功能，并结合给出的`demo.html`文件进行实例分析。 1. **...
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...