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

最新推荐文章于 2024-10-03 09:02:12 发布

weixin_34414196

最新推荐文章于 2024-10-03 09:02:12 发布

阅读量80

点赞数

文章标签： python

原文链接：https://my.oschina.net/deepSprings/blog/389068

版权

2019独角兽企业重金招聘Python工程师标准>>>

不知为何以前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了。

转载于:https://my.oschina.net/deepSprings/blog/389068