jQuery checkbox 체크시 상위로 올리기
개발하다 checkbox에 체크하면 그 checkbox를 위로 올려달라는 요구가
들어올때 요긴하게 사용하자.
ID | Action |
---|---|
1 | |
2 | |
3 | |
4 | |
5 |
jQuery CODE
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('table').on('change', '[type=checkbox]', function () {
var $this = $(this);
var row = $this.closest('tr');
if ( $this.prop('checked') ){
row.insertBefore( row.parent().find('tr:first-child') )
.find('label').html('체크완료');
}
else {
row.insertAfter( row.parent().find('tr:last-child') )
.find('label').html('미체크');
}
});
</script>
HTML CODE
<table>
<thead>
<tr>
<th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="c1">
<td>1</td>
<td><input type="checkbox" id="c_1"><label for="c_1">미체크</label></td>
</tr>
<tr class="c2">
<td>2</td>
<td><input type="checkbox" id="c_2"><label for="c_2">미체크</label></td>
</tr>
<tr class="c3">
<td>3</td>
<td><input type="checkbox" id="c_3"><label for="c_3">미체크</label></td>
</tr>
<tr class="c4">
<td>4</td>
<td><input type="checkbox" id="c_4"><label for="c_4">미체크</label></td>
</tr>
<tr class="c5">
<td>5</td>
<td><input type="checkbox" id="c_5"><label for="c_5">미체크</label></td>
</tr>
</tbody>
</table>
'개발 소발 > 개발 javascript(기초)' 카테고리의 다른 글
Node.js TDD (mocah,should,supertest)예제 (0) | 2020.08.06 |
---|---|
node.js express의 기초개념 (0) | 2020.08.06 |
javascript var와 let의 차이,const란? (0) | 2019.03.05 |
ECMAScript6 ES6 식별자,리터럴,원시타입,이스케이프 란? (0) | 2019.01.16 |