1. Checkbox 체크박스 전체선택 및 전체해제
<input type='checkbox' id='checkboxAll'>
<input type="checkbox" aria-label="Checkbox" value=1>
<input type="checkbox" aria-label="Checkbox" value=2>
<input type="checkbox" aria-label="Checkbox" value=3>
<input type="checkbox" aria-label="Checkbox" value=4>
<input type="checkbox" aria-label="Checkbox" value=5>
<input type="checkbox" aria-label="Checkbox" value=6>
<input type="checkbox" aria-label="Checkbox" value=7>
맨 상단에 전체 체크박스를 선택할 수 있는 input type='checkbox'를 선언해준다. 아래의 체크박스들은 각각의 BNO 값을 가지고 있는 checkbox 들이다.
$("#checkboxAll").on("click",function(e) {
console.log($(this)[0].checked);
if(!$(this)[0].checked){
$('input[type="checkbox"]').prop('checked',false);
}
else{
$('input[type="checkbox"]').prop('checked','checked');
}
});
먼저 위의 bno값이 비어있는 체크박스를 누르면 아래의 체크박스들이 모두 클릭되거나 해체되고자 한다. 이럴 경우에 사용된 jquery코드이다. 먼저 체크박스 전체를 클릭할 수 있는 맨 상단의 체크박스에 id값이나 class값을 부여한다. 먼저 this[0]번째 값을 가지고 와서 check박스를 클릭시 true, false값으로 boolean값을 확인하기 위해 컨솔코드를 작성하였다.
이 후 if문으로 check가 되지 않으면 false, check가 되면 true라는 코드를 작성하였다.
$("#checkboxAll").on("click",function(e) {
console.log($(this)[0].checked);
if($(this)[0].checked){
$('input[type="checkbox"]').prop('checked','checked');
}
else{
$('input[type="checkbox"]').prop('checked',false);
}
});
위의 코드와 아래의 코드 모두 같지만 순서와 if조건문이 조금 다르다. 이렇게 코드를 작성한 하면 맨상단의 체크박스를 클릭시 전체체크 또는 전체해제가 되는 것을 확인할 수 있다.