<input type='checkbox'
name='selectall'
value='selectall'
onclick='selectAll(this)'/> <b>전체</b>
<br />
<input type='checkbox'
name='animal'
value='dog'/> 강아지
<br />
<input type='checkbox'
name='animal'
value='cat' /> 고양이
<br />
<input type='checkbox'
name='animal'
value='rabbit' /> 토끼
위와 같은 모양의 체크박스를 만들었다.
이때 전체를 선택하면 강아지,고양이,토끼가 모두 선택되고 전체를 해제하면 모두 해제되도록 코드를 작성해보자
$(document).ready(function(){
$("#selectall").bind("click", function(){
// 그룹구분 전체 선택
if($("#selectall").is(":checked")) $("input[name=animal]").prop("checked", true);
else $("input[name=animal]").prop("checked", false);
});
});
전체가 선택된 상태에서 1개라도 해제가 되면 이때는 전체가 아니다
그러므로 전체 선택 중 1개라도 해제될땐 전체박스도 함께 해제되도록 한다.
$("input[name=animal]").click(function(){
// 그룹구분 전체선택에서 1개라도 해제하면 '전체' 항목도 해제
var total = $("input[name=animal]").length;
var checked = $("input[name=animal]:checked").length;
if(total != checked) $("#selectall").prop("checked", false);
else $("#selectall").prop("checked", true);
});
그룹 해제의 기준은 전체의 길이와 체크된 항목의 길이를 비교하여 알 수 있다.
'Frontend > 03. Java Script' 카테고리의 다른 글
Radio button Y/N 설정하기 (0) | 2023.12.08 |
---|---|
[javascript] 모바일 서명 패드 만들기 (1) | 2023.12.05 |
[JS] Java Script의 기본 문법 (0) | 2022.09.12 |