`
jerrymsj
  • 浏览: 12804 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
文章分类
社区版块
存档分类
最新评论

checkbox的多选与反选 jQuery 实现

阅读更多
<?php
if($_POST){
print_r($_POST['id']);
}
?>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(function() {
   /** 
    *   自定义函数id
* function id(id){
* return $("#"+id);
* }
*/
var all = id("all");
var not = id("not");
var td = $(".checkbox_id");
var ischeck;
all.click(function () {
not.attr("checked",false)
if(all.attr("checked")==true){
ischeck = true;
}else{
ischeck = false;
}
$.each(td,function(){
$(this).attr("checked",ischeck);
});
});
not.click(function() {
all.attr("checked",false)
$.each(td,function(){
if($(this).attr("checked") == true){
$(this).attr("checked",false);
}else{
$(this).attr("checked",true);
}
});
});
});
</script>
<style type="text/css">
td {
text-align:center;
}
.left{
text-align:left;
}
</style>
<form method="post" action="">
<table style="margin-left:200px;">
<tr>
<th style="width:60px;" class="left"></th>
    <th style="width:30px;">ID</th>
<th style="width:90px;">checkbox</th>
</tr>
<tr>
<td class="left"><input class="checkbox_id" type="checkbox" name="id[]" value="1" /></td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td class="left"><input class="checkbox_id" type="checkbox" name="id[]" value="2" /></td>
<td>c</td>
<td>c</td>
</tr>
<tr>
<td class="left"><input class="checkbox_id" type="checkbox" name="id[]" value="3" /></td>
<td>d</td>
<td>d</td>
</tr>
<tr >
<td class="left">
<input type="checkbox" id="all">全选</input><br>
<input type="checkbox" id="not">反选</input>
</td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
0
3
分享到:
评论

相关推荐

    Js/Jquery 实现checkbox全选,反选,全不选

    本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先,我们需要理解HTML中的复选框元素`&lt;input type="checkbox"&gt;`,它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    checkbox实现全选和反选经典例子

    这可以通过监听全选Checkbox的`CheckedChanged`事件来实现,然后遍历DataGridView的所有行,设置每一行的Checkbox为与全选Checkbox状态一致。 - **反选功能**:反选意味着取消所有已选中的项。这可以通过再次触发...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    jquery 对table动态操作,以及多选反选功能

    一、jQuery与表格操作 1. 创建与删除表格元素: jQuery提供了方便的方法来创建和删除表格元素。例如,`$('table').append('&lt;tr&gt;&lt;td&gt;新行内容&lt;/td&gt;&lt;/tr&gt;')`可以在表格末尾添加一行;而`$('tr').remove()`可以删除...

    jquery 实现全选,全不选,反选,获取选中的值

    综上所述,使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器,我们可以轻松地响应用户的交互,动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式,可以创建出...

    jQuery全选、反选与获取选中值

    总结来说,jQuery提供的这些功能极大地简化了多选操作和数据获取的复杂性,使得前端开发更加高效。通过理解并熟练运用这些API,你可以创建更友好的用户界面,提升用户体验。在实际项目中,根据具体需求,你可能需要...

    Jquery 1.42 checkbox 全选和反选代码

    在网页交互设计中,全选和反选功能是常见的用户操作需求,特别是在处理多选列表时。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果等任务。在这个例子中,我们将详细解析如何使用jQuery...

    Jquery实现全选和反选功能

    本教程将深入探讨如何使用jQuery实现全选和反选功能,这在多选列表或表格中非常常见,例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框(通常标记为“全选”)...

    实现table表格checkbox复选框的全选 反选

    在网页开发中,表格(Table)是常用的数据展示方式,而复选框(Checkbox)则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能,能够大大提升用户体验,使用户可以便捷地选择一组数据。这里我们将详细...

    jquery checkbox全选反选效果代码

    知识点一:使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库,它封装了JavaScript常用的功能代码,极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...

    jQuery全选、反选与获取选中值 源码下载

    本篇文章将详细讲解如何利用jQuery实现全选、反选功能,并介绍如何获取选中项的值。这在构建网页表单或者需要用户多选操作的场景中非常常见。 首先,让我们理解全选和反选的基本概念。全选意味着选定所有可选项,而...

    checkbox使用jquery全选-反选-取得选中的值-Housl.zip

    在网页开发中,复选框(Checkbox)是一种常见的表单元素,用于用户多选操作。在HTML中,我们可以使用`&lt;input type="checkbox"&gt;`标签创建复选框。然而,当处理大量复选框时,全选/反选功能以及获取选中值的需求变得尤...

    jQuery操作checkbox

    本篇文章将深入探讨如何使用jQuery来操作checkbox元素,包括多选、全选和反选等常见功能。 一、jQuery选择checkbox 在jQuery中,我们可以使用`$('input[type="checkbox"]')`选择所有的checkbox。如果你想根据特定...

    jQuery基于layui插件制作checkbox复选框选中代码

    在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...

    jquery全选反选

    "jquery全选反选"这个主题就是关于如何利用jQuery实现复选框的选择全部(全选)和选择相反(反选)功能,这在诸如表格数据筛选、多选确认等场景中非常实用。 全选功能允许用户一键选中所有复选框,反选则是将所有已...

    模拟select带checkbox全选反选取消插件tomcat发布使用

    它允许用户通过复选框(checkbox)进行多选操作,并提供了全选、反选和取消选择的功能,极大地方便了用户交互。 首先,让我们来了解一下Select控件的基本概念。在HTML中,`&lt;select&gt;`元素用于创建下拉列表,用户可以...

    jquery获取checkbox选中的值

    在本文中,我们将深入探讨如何使用jQuery来获取checkbox选中的值,包括全选、取消全选、反选以及选中奇数行的操作,并讲解如何获取选中的值。 首先,我们需要引入jQuery库。在`1.html`文件中,我们看到包含了一个名...

    基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

    本文主要介绍了如何利用PHP(ThinkPHP框架)结合jQuery以及Ajax技术实现一个带有多选、全选、反选、不选以及删除数据功能的动态网页应用。在这个过程中,会涉及到前端页面的构建、JavaScript事件处理以及后端PHP处理...

    js, jQuery实现全选、反选功能.docx

    总结来说,JavaScript和jQuery实现全选、反选功能的核心在于监听全选按钮和子复选框的点击事件,并根据当前选中状态来更新其他复选框的状态。JavaScript通过原生DOM操作,而jQuery则利用简洁的链式操作和事件处理,...

Global site tag (gtag.js) - Google Analytics