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