169it科技资讯


当前位置:  编程技术>jquery

jquery全选与反选插件怎么写?实例代码

    来源: 互联网  发布时间:2014-10-09

用jquery实现一个全选与反选的插件,表单列表数据的全选与取消全选功能,内含示例,小巧实用。
自动判断当前选中数量,加上全选。
将它命名为jQuery.fn.check插件。

功能需求:
1、所有复选框的状态都随全选复选框的状态而发生变化;
2、如果所有复选框都被选中时,全选复选框立即处于选中状态;
3、如果当前选中复选框的数量小于复选框的总数时,全选复选框立即处于非选中状态;
所以,在那些处于全选复选框控制之下的复选框全被点击时,就需要时刻判断当前被选中复选框的个数,从而决定全选复选框是否被选中。

1,复选框:
 

<p><input type="checkbox" name="checkall" />全选</p> 
<p><input type="checkbox" name="check" />单选1</p> 
<p><input type="checkbox" name="check" />单选2</p> 
<p><input type="checkbox" name="check" />单选3</p> 

2,jQuery全选返选插件及调用如下。
 

代码示例:
$(function () {  
    //调用全选插件 
    $.fn.check({ checkall_name: "checkall", checkbox_name: "check" }) 
}); 
//全选插件 www.
//checkall_name   操作全选的复选框name 
//checkbox_name   被操作的复选框的name  name值可不统一 设置包含值 以XXX开头 自己修改 
(function ($) { 
    $.fn.check = function (options) { 
        var defaults = { 
            checkall_name: "checkall_name", //全选框name 
            checkbox_name: "checkbox_name" //被操作的复选框name 
        }, 
        ops = $.extend(defaults, options); 
        e = $("input[name='" + ops.checkall_name + "']"), //全选 
        f = $("input[name='" + ops.checkbox_name + "']"), //单选 
        g = f.length; //被操作的复选框数量 
        f.click(function () { 
            $("input[name ='" + ops.checkbox_name + "']:checked").length == $("input[name='" + ops.checkbox_name + "']").length ? e.attr("checked", !0) : e.attr("checked", !1); 
        }), e.click(function () { 
            for (i = 0; g > i; i++) f[i].checked = this.checked; 
        }); 
    }; 
})(jQuery); 

您可能感兴趣的文章:
  • jquery实现checkbox全选全不选(示例)
  • jquery实现全选、反选、删除、添加的功能
  • jQuery实现CheckBox全选、全不选的示例代码
  • jquery实现checkbox的全选、取消及跨页保存
  • jquery全选、反选、将选中的表单值分割为字符串

    
相关技术文章:
    ▪jquery进度条简单示例

     一个jquery进度条的实例代码 效果图: 需要用到的图片: 背景图片: 进度显示图片: 下面是正文,大家可以体会与纯js进度条有什么不同啦。 1,网页结构:   <div id="center"> <div id="message"></div> <div id="loading"><div></div></div> </div> 2,css样式代码   #center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; background:url(bak.png) no-repeat; } #loading div{ width:0px; ......


    ▪jquery进度条效果示例

     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="Content-Type" content="text/html; charset=utf-8" /> <title>jquery实现进度条-www.yuju100.com</title> <style> .progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;} #bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;} </style> <script type="text/js......


    ▪jquery进度条代码 jquery模拟页面加载进度

     jquery模拟页面加载进度条 因为无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢? 页面是从上往下执行的,可以大致估算出在页面的某个位置加载了多少,而后用jquery模拟出一个进度条来显示。 效果图,如下: 首先,先画一个进度条的样子,也就是上图图中的样子。 1,css样式代码   .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative} .jindu{floa......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号