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

标签：

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

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

标签：

原文地址：http://my.oschina.net/u/919612/blog/389068