文档章节

Bootstrap开源包中checkbox的全选和反选

渊泉如渊
 渊泉如渊
发布于 2015/03/19 16:52
字数 385
阅读 24362
收藏 6

    不知为何以前js写的全选和反选功能都不能用了,经过Chrome浏览器控制台查看后,发现并不是不起作用,只是样式没有变化而已。首先先刚放上html代码,省略了别的代码,只含有checkbox:

<!-- lang: html -->
    <label class="checkbox">
        <input class="states" type="checkbox" name="ids" value="1" />
    </label>
    <label class="checkbox">
        <input class="states" type="checkbox" name="ids" value="2" />
    </label>
    <label class="checkbox">
        <input class="states" type="checkbox" name="ids" value="3" />
    </label>

    但是在Chrome浏览器控制台上看到的源码却多了一些标签:

    <label class="checkbox">
        <div class="checker">
            <span>
                <input class="states" type="checkbox" name="ids" value="1" />
            <span>
        </div>
    </label>
    <label class="checkbox">
        <div class="checker">
            <span>
                <input class="states" type="checkbox" name="ids" value="2" />
            <span>
        </div>
    </label>
    <label class="checkbox">
        <div class="checker">
            <span>
                <input class="states" type="checkbox" name="ids" value="3" />
            <span>
        </div>
    </label>

    checkbox外边又多了两层标签,并且当选中的时候,<span>标签增加了一个样式<span class="checked">,当时没有注意,于是就这样写js:

function selectAll(){
    $("INPUT[type='checkbox']").each( function() {
        $(this).attr('checked', true);
        $(this).addClass('checked');
    });
}

    后来一想,$(this)是checkbox对象,应该是checkbox的父标签<span>增加样式,所以就修改成:

function selectAll(){
    $("INPUT[type='checkbox']").each( function() {
        $(this).attr('checked', true);
        $(this).parents('.checkbox').find('span').addClass('checked');
    });
}

function invertSelect(){
    $("INPUT[type='checkbox']").each( function() {
	if($(this).attr('checked')) {
		$(this).attr('checked', false);
		$(this).parents('.checkbox').find('span').removeClass('checked');
	} else {
		$(this).attr('checked', true);
	        $(this).parents('.checkbox').find('span').addClass('checked');
	}
    });
}

    这样就ok了。

© 著作权归作者所有

渊泉如渊

渊泉如渊

粉丝 7
博文 33
码字总数 25641
作品 0
郑州
Android工程师
私信 提问
加载中

评论(5)

d
duanrui
$('.checkAllBtn').attr('checked', true);
$.uniform.update();
试试
渊泉如渊
渊泉如渊 博主

引用来自“a铖”的评论

昨天晚上遇到这样的问题,表面上看起来是能实现用代码控制它选中,但是form提交由于被遮盖的checkbox没有真的选中,表单数据中没有包含checkbox的值
不好意思,当时我不是在form表单提交的,所以没有测试这种情况
a
a铖
昨天晚上遇到这样的问题,表面上看起来是能实现用代码控制它选中,但是form提交由于被遮盖的checkbox没有真的选中,表单数据中没有包含checkbox的值
渊泉如渊
渊泉如渊 博主
不客气,共同学习!
龙鼎
谢谢啊,正好管用!!!
$(this).parent("span").addClass("checked"); 这样也能选中的
checkbox的常用操作

声明:如果你想去看具体的例子,请下载压缩包:checkbox-demo.rar就行了! 里面包括checkbox的基本操作的例子,以及一个淘宝的小例子!! Checkbox的操作基本上就几种:选中,未选中,全选,...

技术小胖子
2017/10/31
0
0
复选框问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> </style......

李永china
2016/09/26
6
0
php全选,反选,不选 和 选中批量删除和分页代码

php全选,反选,不选 和 选中批量删除和分页代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm......

招PHP程序员
2011/01/10
1K
0
小博老师演示常用JQuery效果 ——复选框全选和反选效果

[理论知识] 我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选和反选的效果。 [步骤解读一]界面布局...

博为峰教研组
2016/11/18
39
0
小段code_TagName/onload_实现全选不选反选

下面代码是实现全选、不选和反选的功能:由于javascript 是解释型语言,读一句执行一句,当script标签中获取的元素在之后出现,将出现错误,可以用window.onload解决这个问题,使其在加载完整...

cd_ing
2013/12/14
55
0

没有更多内容

加载失败,请刷新页面

加载更多

华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
35分钟前
4
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
37分钟前
4
0
C++容器底层数据结构

内置数组: int arr[10][10];memset(arr,0,10*10*sizeof(int)); //初始化int tmp[10][10];memcpy(arr, tmp, 10 * 10 * sizeof(int));//拷贝 void *memcpy(void *destin, void *source,......

SibylY
38分钟前
4
0
Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
今天
7
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部