2016-12-07 75 views
2

我使用這個腳本來檢查,並取消所有複選框:檢查,並取消所有複選框與jQuery

$('#checkall').click(function() { 
    var checked = $(this).data('checked'); 
    $('.chkall').find(':checkbox').attr('checked', !checked); 
    $(this).data('checked', !checked); 
}); 

它的偉大工程,但只要我以後取消幾個選中的複選框「檢查所有」,然後點擊「全部取消選中」和「全部選中」,那些以前未選中的複選框不再被選中。幫助會很棒!非常感謝你!

+3

使用'.prop的()''而不是.attr()' – Satpal

+0

爲什麼你設置'data'了'checkall'元素?爲什麼它本身不是一個複選框 – vsync

+0

Checkall是CheckBox還是其他控件? – selami

回答

6

這可能是正確的方式..

使用道具,而不是attr和組一個div裏面的複選框列表,只是爲了組織的目的。照原樣使用checked,不要否定它。

$(document).ready(function() { 
 
    $('#checkall').click(function() { 
 
    var checked = $(this).prop('checked'); 
 
    $('#checkboxes').find('input:checkbox').prop('checked', checked); 
 
    }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="checkall" /> 
 
<label for="checkall">check/uncheck all</label> 
 
<br/> 
 
<br/> 
 
<div id="checkboxes"> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 

 
</div>

+0

謝謝!這很好! – vloryan

+0

呵呵。雖然有一點小問題。當我取消全部選中時,所有複選框值仍然會轉移到[我的鏈接](http://stackoverflow.com/questions/40693232/add-checkbox-values-to-a-link-using-javascript/40693356#40693356)爲如果他們被檢查? – vloryan

6

$('#checkall').click(function(){ 
 
    var d = $(this).data(); // access the data object of the button 
 
    $(':checkbox').prop('checked', !d.checked); // set all checkboxes 'checked' property using '.prop()' 
 
    d.checked = !d.checked; // set the new 'checked' opposite value to the button's data object 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='checkall' data-checked='false'>check/uncheck all</button> 
 
<input type=checkbox> 
 
<input type=checkbox> 
 
<input type=checkbox> 
 
<input type=checkbox> 
 
<input type=checkbox>


我猜你的HTML是什麼樣子,在觸發按鈕的方面,但我不知道你是怎麼開始在其上設置data。希望這是你編碼的方式。如果沒有,請告訴。

+0

@Satpal - yes,data.checked。有什麼問題?我不知道自己在做什麼,所以沒有27k分。 – vsync

+0

現在你已經編輯了,所以現在你知道什麼是錯的。對於擁有27k積分的傢伙來說,這個回答很差 – Satpal

+0

@Satpal - 我正在寫一個答案,並且在我打字的時候忘記了改變。殺我。請解釋你爲什麼認爲這是一個不好的答案。它完美地工作 – vsync

2

您只需獲取所有複選框並全部檢查。

$('#checkall').click(function() { 
 

 
    var _this = this; 
 
    $('#checkboxes').find('input[name="checkAll"]').each(function() { 
 
    
 
    if ($(_this).is(':checked')) { 
 
     $(this).prop('checked', true); 
 
    } else { 
 
     $(this).prop('checked', false); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="checkall" /> 
 
<label for="checkall">check/uncheck all</label> 
 
<br/> 
 
<br/> 
 
<div id="checkboxes" class=".chkall"> 
 
    <input type="checkbox" name="checkAll"/> 
 
    <input type="checkbox" name="checkAll"/> 
 
    <input type="checkbox" name="checkAll" /> 
 
    <input type="checkbox" name="checkAll" /> 
 
    <input type="checkbox" name="checkAll" /> 
 
    <input type="checkbox" name="checkAll" /> 
 
    <input type="checkbox" name="checkAll" /> 
 

 
</div>

相關問題