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的全選和反選