当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery复选框CHECKBOX全选、反选

Javascript
js支持158、159开头的手机号的验证
javascript学习网址备忘
JScript的条件编译
[原创]站长必须要知道的javascript广告代码
js实现的点击超链显示隐藏层
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
JavaScript 不只是脚本
把JS与CSS写在同一个文件里的书写方法
Javascript & DHTML 实例编程(教程)基础知识
Javascript & DHTML 实例编程(教程)DOM基础和基本API
javascript实现的一个图片转移效果
用js实现键盘方向键翻页功能的代码
js实现DIV的一些简单控制
用CSS+JS实现的进度条效果效果
爱恋千雪-US-AscII加密解密工具(网页加密)下载
用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口
非常不错的页面特效 建议大家看下
javascript Zifa FormValid 0.1表单验证 代码打包下载
实现javascript的延期执行或者重复执行的两个函数
推荐一个不错的图片浏览效果

Javascript 中的 jquery复选框CHECKBOX全选、反选


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 351 ::
收藏到网摘: n/a

在JQUERY官方站点看到了另一个方法.更加简单,给大家分享出来: 官方给的函数名为CheckboxGroup;顾名思义就是选取一组CHECKBOX.最新版是在6月18号发布的: 使用方法:我们先把下面的JS保存为有个文件,到时候调用,淡然你也可以直接写在页面内,推荐使用前者,方便重用:
复制代码 代码如下:

(function($){
$.fn.checkgroup = function(options){
//merge settings
settings=$.extend({
groupSelector:null,
groupName:'group_name',
enabledOnly:false
},options || {});
var ctrl_box=this;

//allow a group selector override option
var grp_slctr = (settings.groupSelector==null) ? 'input[name='+settings.groupName+']' : settings.groupSelector;
//grab only enabled checkboxes if required
if(settings.enabledOnly)
{
grp_slctr += ':enabled';
}
//attach click event to the "check all" checkbox(s)
ctrl_box.click(function(e){
chk_val=(e.target.checked);
$(grp_slctr).attr('checked',chk_val);
//if there are other "select all" boxes, sync them
ctrl_box.attr('checked',chk_val);
});
//attach click event to checkboxes in the "group"
$(grp_slctr).click(function(){
if(!this.checked)
{
ctrl_box.attr('checked',false);
}
else
{
//if # of chkbxes is equal to # of chkbxes that are checked
if($(grp_slctr).size()==$(grp_slctr+':checked').size()){
ctrl_box.attr('checked','checked');
}
}
});
//make this function chainable within jquery
return this;
};
})(jQuery);
主要看下面的使用方法:
复制代码 代码如下:

<input type='checkbox' class='checkall'>checkall<br>
<input class='groupclass' name='group' type='checkbox'>chk1<br>
<input class='groupclass' name='group' type='checkbox'>chk2<br>
<input class='groupclass' name='group' type='checkbox'>chk3<br>
<input class='groupclass' name='group' type='checkbox'>chk4<br>
<input type='checkbox' class='checkall' id="checkall">
<?php
$(function() {
$("#checkall").click(function() {
$('.checkall').checkgroup({groupSelector:'.groupclass',enabledOnly:true});
});
});

或者下面这种方式:
复制代码 代码如下:

<?php
$(function() {
$("#checkall").click(function() {
$('#checkall').checkgroup({groupName:'group'});
});
});