jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选:

在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理、用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果。代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>jQuery复选框全选全不选代码</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$.fn.checkCbx=function(){
  return this.each(function(){
    this.checked = !this.checked;
  })
}
$(function(){
  $("#btnSelect").click(function(){
    this.value = this.value == "全选"?"反选":"全选";
    $("input:checkbox").checkCbx();
  })
})
</script>
</head>
<body>
<form name="form1" method="post" action="Default8.aspx" id="form1">
  <table border="1">
    <tr>
      <th>选择</th>
      <th>id</th>
      <th>姓名</th>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>1</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>2</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>3</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>4</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>5</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>6</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>7</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>8</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>9</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>10</td>
      <td>蚂蚁部落</td>
    </tr>
  </table>
  <input id="btnSelect" type="button" value="全选" />
</form>
</body>
</html>

以上代码实现复选框的全选和全不选效果。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0519/1933.html

最为原始地址是:http://www.softwhy.com

时间: 2024-12-16 09:21:09

jQuery如何实现复选框全选和全不选的相关文章

jQuery实现checkbox(复选框)选中、全选反选代码

谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr

jQuery_review之jQuery实现多选框的反选、全选、全不选

有几个非常常见的知识点,需要重点关注一下.如何显示多选框呢?<input type="checkbox" name="name" value="value1"><input type="checkbox" name="name" value="value2">.这样就能表示两个多选框,他们具有同样的name值,在JSP中,传到后台的时候,可以使用request.g

复选框作为按钮 实现全选/不全选

$(function () {            $("#checkAll").click(function () {                $('input[name="infoids[]"]').attr("checked", this.checked);            });            var $subBox = $("input[name='infoids[]']");         

多选框向后台传值,多选框的回显,对多选框的各种操作

1.多选框的回显: js:$(     function(){     var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为checkbox_的所有多选框对象     var checkArray=${list};//获取多选框需要回显得对应的值集合     console.info("checkArray=",checkArray);     for(var i=0;i<checkArray.lengt

jQuery对复选框(checkbox)的全选,全不选,反选等的操作

效果截图: HTML代码: <body><ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><input type="checkbox"

组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)

组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得.然好的控件永远敢不上应用的步伐,有时常规控件并不能满足应用的需要,经常需要在现有的控件上做扩展.有些应用需要在组合框的列表框的每一项前加复选框,以便可以控制列表框每一项的状态(选中还是未选中),显然现有的组合框(列表框+文本框的组合)不能满足应用要求.那么怎么得到一个超强组合框(列表框+文本框+复选

web前端 -- jQuery全选框的使用

根据千峰教育学习视频所练习的笔记 | 学习一段时间,我也有写一点东西的必要了··· 在页面上有这样一个表格: 我想实现: 勾选第一行的全选框后,所有的多选框全部被选中:取消选中全选框,其余的多选框不会被全部勾选. 当所有的复选框个数和被选中的多选框个数一致时,自动勾选全选框,否则,不会自动勾选全选框. 1. 页面的表格样式 <body> <table border="1" bgcolor="antiquewhite"> <thead a

Bootstrap之表格checkbox复选框全选

效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: [html] view plain copy <table class="table table-bordered table-hover"> <thead> <tr class="success"> <th>类别编号</th> <th>类别名称</th> <th>类别组<

输出选中的复选框的个数(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>输出选中的复选框的个数</title> <script src="jquery-1.7.1.min.js" typ

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft