JavaScript&JQuery
[script&Jquery] #체크박스 전체선택&해제&삭제하기
mygomii
2018. 4. 20. 23:41
반응형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <table> <thead> <tr> <th class="checkbox"> <input type="checkbox" id="ck_all"> </th> </tr> </thead> <tbody> <tr data-tr_value="1"> <td><input type="checkbox" name="checkRow" value="1"></td> </tr> <tr data-tr_value="2"> <td><input type="checkbox" name="checkRow" value="2"></td> </tr> <tr data-tr_value="3"> <td><input type="checkbox" name="checkRow" value="3"></td> </tr> <tr data-tr_value="4"> <td><input type="checkbox" name="checkRow" value="4"></td> </tr> </tbody> </table> <input type="button" id="delete"> | cs |
1. prop()를 이용하여 checkbox 전체선택 및 해제
2. 체크된 value값 찾아서 data-tr_value 와 일치하면 tr 삭제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(document).ready(function(){ //체크박스 전체 선탣&해제 $('#ck_all').click(function(){ if($("#ck_all").prop("checked")){ $("input[type=checkbox]").prop("checked",true); }else{ $("input[type=checkbox]").prop("checked",false); } }); $('#delete').click(function(){ if(confirm("삭제하시겠습니까?")){ $("input[name=checkRow]:checked").each(function(){ var tr_value =$(this).val(); var tr=$("tr[data-tr_value='"+tr_value+"']"); tr.remove(); }); }else{ return false; } }); }); | cs |
반응형