jquery 全选、全不选、反选效果的实现代码【推荐】

jquery 全选、全不选、反选效果的实现代码【推荐】 

首先：引入jquery

<title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<script src="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery -->

样式：

<styletype="text/css">
<!--
#div1{
  width:980px;
  margin:0 auto;
  position:relative;
  text-align:left;
  padding-left:400px;
  line-height:30px;
  border:1px dotted #0075c5;
}
li{
  display:block;
  list-style:none;
  float:left;
  position:relative;
  padding-left:20px;
}
.clr{
  height:20px;
}
-->
</style>

body布局：

<divid="div1">
  <divclass="clr"> </div>
  <!--选项开始-->
  <inputtype="checkbox"/><ahref="haran.info">haran.info_脚本编程</a><br/> 

  <inputtype="checkbox"/><ahref="haran.info">haran.info_网站编程</a><br/> 

  <inputtype="checkbox"/><ahref="haran.info">haran.info_系统管理</a><br/> 

  <inputtype="checkbox"/><ahref="haran.info">haran.info_服务器配置</a><br/> 

  <inputtype="checkbox"/><ahref="haran.info">haran.info_系统运维</a><br/> 

  <inputtype="checkbox"/><ahref="haran.info">haran.info_博客</a><br/> 

  <inputtype="checkbox"/><ahref="haran.info">haran.info_首页</a><br/>
  <!--选项结束-->
  <!--功能按钮开始-->
  <inputtype="button"id="selAll"value="全选"/> 

  <inputtype="button"id="unselAll"value="全不选"/> 

  <inputtype="button"id="reverse"value="反选 "/>
  <!--功能按钮结束-->
  <divclass="clr"> </div>
</div><!--关闭div1-->

实现功能：

<scripttype="text/javascript">
$(document).ready(function () {

  $("#selAll").click(function () { //":checked"匹配所有的复选
    $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中
  });

  $("#unselAll").click(function () {
    $("#div1 :checkbox").attr("checked", false);
  });

  //理解用迭代原理each(function(){})
  $("#reverse").click(function () {
  $("#div1 :checkbox").each(function () {
  $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态：如果选中则取反
    });
  });
});
</script>

以上这篇jquery 全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery全选/全不选/反选另一种实现方法(配合原生js)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery 实现checkbox全选，反选，全不选等功能代码(奇数)

    设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): 复制代码 代码如下: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox

  • JQuery选中checkbox方法代码实例（全选、反选、全不选）

    JQuery选中checkbox方法代码实例（全选、反选、全不选）

    1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serv

  • 利用jQuery实现CheckBox全选/全不选/反选的简单代码

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

  • jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr(). 方法一:

  • jQuery对checkbox 复选框的全选全不选反选的操作

    jQuery对checkbox 复选框的全选全不选反选的操作

    先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

  • jQuery实现全选、反选和不选功能

    本文给大家分享一段基于jQuery的全选.反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等).文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者. HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <ul id="list"> <li><label><input type="checkbox" val

  • 基于jquery实现复选框全选，反选，全不选等功能

    jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明.设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <in

  • 基于jQuery实现复选框的全选 全不选 反选功能

    本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家. jQuery代码: 复制代码 代码如下: $(function(){             $("#checkedAll").click(function(){                 $('[name=items]:checkbox').attr('checked',true);             });             $("#checkedNo&quo

  • jquery 全选、全不选、反选效果的实现代码【推荐】

    jquery 全选.全不选.反选效果的实现代码[推荐]  首先:引入jquery <title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="/js/jquery-1

  • JQuery点击事件回到页面顶部效果的实现代码

    JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo

  • JQuery页面随滚动条动态加载效果的简单实现(推荐)

    Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止.要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义.我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据.至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试-- 我试着用jquery来实现这个功能.先要得到滚动条的总长属性值:scrollHeight

  • jquery win 7透明弹出层效果的简单代码

    复制代码 代码如下: $("#firefoxicon").click(function() {       $("#window1").chinaz({             windowtitle:          "firefox",             windowpositiontop:    "center",             windowpositionleft:   "center&qu

  • jquery实现图片无缝滚动 蒙版遮蔽效果

    本文实例为大家分享了jquery实现图片无缝滚动.蒙版效果的具体代码,供大家参考,具体内容如下 1.无缝连接:通过对li设置属性float:left:消除标签之间的间隔 2.通过对ul整体进行偏移设置,使图片整体滚动, 3.设置图片切换时机, 4.蒙版遮罩移入时机的选择 代码片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • jquery实现图片轮播和滑动效果

    jquery实现图片轮播和滑动效果

    本文实例为大家分享了jquery实现图片轮播和滑动效果的具体代码,供大家参考,具体内容如下 实习做了一个简易的图片轮播效果 下图是做出来的效果 源码 html 和 js部分 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link type="text/css" rel="sty

  • jQuery实现checkbox全选、反选及删除等操作的方法详解

    jQuery实现checkbox全选、反选及删除等操作的方法详解

    本文实例讲述了jQuery实现checkbox全选.反选及删除等操作的方法.分享给大家供大家参考,具体如下: 运行效果: 1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100%" cellspacing="1" cellpadding="0"> <tr> <th><input

  • jQuery菜单实例(全选,反选,取消)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="全选" onclick="chec

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • 基于JavaScript实现全选、不选和反选效果

    基于JavaScript实现全选、不选和反选效果

    利用javascript实现全选.不选和反选效果,这个不用多说,直接来代码,代码中自有注释帮你理解. <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ // 获取所有的按钮 var btns = document.getElementsByTagName("button&quo

随机推荐