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了。