jQuery全选与取消全选实现代码

引用Jquery 库jquery-1.4.1-vsdoc.js 等

jQuery.attr  获取/设置对象的属性值,如：

 代码如下 复制代码

$("input[name='chk_list']").attr("checked");     //读取所有name为'chk_list'对象的状态（是否选中）

$("input[name='chk_list']").attr("checked",true);      //设置所有name为'chk_list'对象的checked为true

再如：

 代码如下 复制代码

$("#img_1").attr("src","test.jpg");    //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src");     //读取ID为img_1的<img>src值

  下面的代码是获取上面实例中选中的checkbox的value值:

Jquery脚本代码——————————————————————

 代码如下 复制代码

$(function() {
$('#inputCheck').click(function() {
$("input[name='Checkbox1']").attr("checked", $(this).attr("checked"));
});
}); // 全选

$(function() {
$("#select_reverse").click(function() {
$("input[name='Checkbox1']").each(function(idx, item) {
$(item).attr("checked", !$(item).attr("checked"));
})
});
});//反选

html 前台代码————————————————————————

 代码如下 复制代码
[code]
<input id="inputCheck" type="checkbox" />全选
<input id="select_reverse" type="checkbox" />反选
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
[html]

实例

 代码如下 复制代码

<input type="checkbox" name="test[]" />选项1
<input type="checkbox" name="test[]" />选项2
<input type="checkbox" name="test[]" />选项3
<input type="checkbox" name="test[]" />选项4
<input type="checkbox" name="test[]" />选项5
<input type="checkbox" id="checkall" />全选

JQuery代码

 代码如下 复制代码

;(function($){
 $.fn.checkall = function(options){
  var defaults = {chname:"checkname[]", callback:function(){}},
   options = $.extend(defaults, options),
   $obj = $(this),
   $items = $("input[name='"+options.chname+"']"),
   checkedItem = 0;
  $items.click(function(){
   if($items.filter(":checked").length === $items.length){
    $obj.attr("checked",true);
   }else{
    $obj.removeAttr("checked");
   }
   checkedItem = $items.filter(":checked").length;
   if(typeof options.callback === 'function') options.callback(checkedItem);
  });
  return $obj.each(function(){
   $(this).click(function(){
    if($(this).attr('checked')){
     $items.attr("checked",true);
    }else{
     $items.removeAttr("checked");
    }
    checkedItem = $items.filter(":checked").length;
    if(typeof options.callback === 'function') options.callback(checkedItem);
   });
  });
 }
})(jQuery);

调用方法

 代码如下 复制代码

$(function(){
 $("#checkall").checkall({chname:"test[]", callback: function(e){alert(e)}});
})
时间： 2024-10-03 08:57:23

jQuery全选与取消全选实现代码的相关文章

jquery操作checkbox实现全选和取消全选_jquery

今天这样写了一个全选和取消全选的功能: 全选:$(":checkbox").attr("checked","checked"); 取消全选:$(":checkbox").removeAttr("checked"); 获取选中的:$(":checked[checked='checked']") 发现点全选可以,在点取消全选也可以,获取选中的失效,接下来再点任何按钮都没有效果了 这样行不通,

Gvidview想设置所有checkbox项的全选和取消全选

问题描述 想在gridvew外面加一个按钮,点击设置所有项的全选和取消全选,该怎样做? 解决方案 解决方案二:usingSystem;usingSystem.Data;usingSystem.Configuration;usingSystem.Collections;usingSystem.Web;usingSystem.Web.Security;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.WebCon

jquery checkbox全选、取消全选实现代码_jquery

复制代码 代码如下: <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_1″ />1<br /> <input type="checkbox&q

android设置全屏与取消全屏方法

android提供了两种方式来实现无标题栏和全屏效果,即通过xml文件声明的方式或在程序中动态控制的方式. android设置全屏方法 一.通过程序设置:  代码如下 复制代码     package com.hhh.changeimage:     import android.app.Activity;     import android.os.Bundle;     import android.view.Window;     import android.view.WindowMan

Jquery 多选框全选与取消全选核心代码

核心代码  代码如下 复制代码 $("#checkall").click(function(){     if(this.checked){       $("input[name='check']").each(function(){this.checked=true;});     }else{       $("input[name='check']").each(function(){this.checked=false;});    

javascript全选与取消全选代码(1/2)

<script type="text/javascript教程"> function checkall(name) {   var names=document.getelementsbyname(name);   var len=names.length;   if(len>0)   {    var i=0;    for(i=0;i<len;i++)    names[i].checked=true;      } } //全不选 function che

js multiple全选与取消全选实现代码

 代码如下 复制代码 $("select").change(function(){     var n = $(this).children().length;     var obj;     var i = 1;        $(this).children().each(function(){      if(i == n)      {       alert($(this).text());      }      i++;     });    }); 综合以上二法,本人

Javascript实现CheckBox的全选与取消全选的代码_表单特效

字母全选开关 a b c d e f g 数字全选开关 1 2 3

javascript全选与取消全选代码

<script type="text/javascript教程"> function checkall(name) {   var names=document.getelementsbyname(name);   var len=names.length;   if(len>0)   {    var i=0;    for(i=0;i<len;i++)    names[i].checked=true;      } } //全不选 function che