속성 조작 메서드(prop)실습_jQuery
2022. 1. 21. 16:03ㆍksmart_html_css_js/jQuery 실습
728x90
1.
1)전체 체크 체크박스 클릭 시 체크가 되었다면 아래의 행 전체 선택이 되도록 하고,
전체 체크 클릭 시 체크가 해제가 되었다면 아래의 행 전체가 선택 해제 되도록 하여라.
2)반전 버튼 클릭 시 체크된 대상은 해제, 해제된 대상은 체크 되도록 하여라.
3)선택된 대상 제거 버튼 클릭 시 선택된 행을 제거 하도록 하여라.
<body>
<table border="1">
<thead>
<tr>
<th><input type="checkbox" id="allCheck">전체선택</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checks"></td>
</tr>
<tr>
<td><input type="checkbox" class="checks"></td>
</tr>
<tr>
<td><input type="checkbox" class="checks"></td>
</tr>
<tr>
<td><input type="checkbox" class="checks"></td>
</tr>
<tr>
<td><input type="checkbox" class="checks"></td>
</tr>
</tbody>
</table>
<button type="button" id="checksDel">선택 행 제거</button>
<button type="button" id="checksReversal">선택 행 반전</button>
</body>
1. 답
<script type="text/javascript">
$(function(){
var $checks=$('.checks');
$('#allCheck').click(function(){
if($(this).prop('checked')){
$('.checks').prop('checked',true);
}else{
$('.checks').prop('checked',false);
}
});
$checks.click(function(){
if($('.checks:checked').length==5){
$('#allCheck').prop('checked',true);
}else{
$('#allCheck').prop('checked',false);
}
});
$('#checksDel').click(function() {
var $checks= $('.checks');
for(var i=0;i<$checks.length;i++){
if($checks.eq(i).prop('checked')){
$checks.eq(i).parents('tr').remove();
}
}
});
var $checksReversal=$('#checksReversal');
$checksReversal.click(function() {
for (var i = 0; i < $checks.length; i++) {
if($checks.eq(i).prop('checked')){
$checks.eq(i).prop('checked', false);
}else{
$checks.eq(i).prop('checked', true);
}
}
});
});
</script>728x90
'ksmart_html_css_js > jQuery 실습' 카테고리의 다른 글
| 선택자 실습_jQuery (0) | 2022.01.31 |
|---|---|
| 클래스 속성 제어 메서드, 동적 바인딩_jQuery (0) | 2022.01.27 |
| 속성 제어 메서드 실습_jQuery (0) | 2022.01.21 |
| 객체 조작 메서드 실습_jQuery (0) | 2022.01.21 |
| 배열 관련 매서드 실습_jQuery (0) | 2022.01.21 |