- 버튼 클릭시 체크박스 모두 해제.
- prop 메서드 사용.
등록일 : ,
이름으로 접근해서 체크 박스 전체 해제하기
HTML
<input type="checkbox" name="chk" value="1" checked />체크1
<input type="checkbox" name="chk" value="2" checked />체크2
<input type="checkbox" name="chk" value="3" checked />체크3
<input type="checkbox" name="chk" value="4" checked />체크4
<input type="checkbox" name="chk" value="5" checked />체크5
<br><br>
<button type="button" onclick="gogogo()">전체 해제</button>
자바스크립트
function gogogo(){
// 체크박스의 이름과 prop 메서드를 사용하여 전체 해제
$('[name=chk]').prop('checked', false);
}
요소와 타입으로 체크 박스 전체 해제하기
- 버튼 클릭시 체크박스 모두 해제.
- 특정 요소 안의 모든 체크박스를 대상으로 해보기.
- prop 메서드 사용.
- 특정 요소 안의 모든 체크박스를 대상으로 해보기.
- prop 메서드 사용.
체크1
체크2
체크3
체크4
체크5
HTML
<div id="wrap">
<input type="checkbox" name="chk" value="1" checked />체크1
<input type="checkbox" name="chk" value="2" checked />체크2
<input type="checkbox" name="chk" value="3" checked />체크3
<input type="checkbox" name="chk" value="4" checked />체크4
<input type="checkbox" name="chk" value="5" checked />체크5
</div>
<br>
<button type="button" onclick="gogogo()">전체 해제</button>
자바스크립트
function gogogo(){
// 체크박스 부모요소 id 와 "타입" 으로 전체 해제
$('#wrap [type=checkbox]').prop('checked', false);
}
PHP의 "[]" 배열형 이름 체크 박스 전체 해제하기
- 버튼 클릭시 체크박스 모두 해제.
- prop 메서드 사용.
- prop 메서드 사용.
체크1
체크2
체크3
체크4
체크5
HTML
<div id="wrap">
<input type="checkbox" name="chk[]" value="1" checked />체크1
<input type="checkbox" name="chk[]" value="2" checked />체크2
<input type="checkbox" name="chk[]" value="3" checked />체크3
<input type="checkbox" name="chk[]" value="4" checked />체크4
<input type="checkbox" name="chk[]" value="5" checked />체크5
</div>
<br>
<button type="button" onclick="gogogo()">전체 해제</button>
자바스크립트
function gogogo(){
// 체크박스의 이름과 prop 메서드를 사용하여 전체 해제
$('[name="chk[]"]').prop('checked', false);
}
참고 : attr() 과 prop() 에 관한 이야기
1.6 버전 이전에는 attr() 메서드로 체크 여부를 컨트롤 할 수 있었으나
1.6 버전 부터 prop() 메서드로 변경되었습니다.
attr() 은 임의의 값을 가지는 대상과 관련된 메서드이고
prop() 은 존재 여부만 있는 대상과 관련된 메서드 입니다.
확실하게 구분을 하게 된 것이죠.
checked, selected 같은 것이 그 예입니다.
그래서 제이쿼리를 새로운 버전으로 적용했을때
기존 코드에서 에러가 나는 문제가 발생했었죠.
이제는 prop() 입니다 !!
1.6 버전 부터 prop() 메서드로 변경되었습니다.
attr() 은 임의의 값을 가지는 대상과 관련된 메서드이고
prop() 은 존재 여부만 있는 대상과 관련된 메서드 입니다.
확실하게 구분을 하게 된 것이죠.
checked, selected 같은 것이 그 예입니다.
그래서 제이쿼리를 새로운 버전으로 적용했을때
기존 코드에서 에러가 나는 문제가 발생했었죠.
이제는 prop() 입니다 !!
방문해 주셔서 감사드립니다 !!