Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- DA#
- 자바객체
- 설치방법
- 자바
- Servlet
- SQL
- 컨텍스트 초기화 객체
- 예제
- 자바기초
- 자바 암호화
- 조건문
- OOP
- java
- 입출력
- 숫자야구
- 자바공부
- 서블릿
- 자바I/O
- 스택
- 스트림
- 테이블 설계
- 서블릿 값 가져오기
- 서블릿 예제
- 자바설치
- File
- 서블릿 파라미터
- 오라클
- 자바문제
- 객체
- 서블릿 동작방식
Archives
- Today
- Total
다양한 관심 :)
제이쿼리 - 체크박스 사용 본문
Checkbox
체크박스에 제이쿼리나 자바스크립트로 이벤트를 처리해야할 경우가 종종 있다.
checked 여부 확인하기
- id로 확인하기
$('input:checkbox[id="checkbox_id"]').is(":checked") == true
- name 으로 확인하기
$('input:checkbox[name="checkbox_name"]').is(":checked") == true$('input[name="checkbox_name"]').is(":checked")
- 제이쿼리 prop() 메소드
$('#checkboxId').prop("checked");
checked 처리 하기
- 개별 처리
$('input:checkbox[id="checkbox_id"]').attr("checked", true);
- 전체 처리
$('input:checkbox[name="checkbox_name"]').each(function() { this.checked = true; });
checkbox value 값 확인
$('input:checkbox[id="checkbox_id"]').val();
간단 예제로 체크박스 다루기
- HTML
<div class="">
<div>
<label class="checkbox">
<input type="checkbox" class="checkbox-test" id="test1">
체크1
</label>
</div>
<div>
<label class="checkbox">
<input type="checkbox" class="checkbox-test" id="test2">
체크2
</label>
</div>
<div>
<label class="checkbox">
<input type="checkbox" class="checkbox-test" id="test3">
체크3
</label>
</div>
</div>
- Script
$(".checkbox-test").click(function () {
let chekObj = document.getElementsByClassName("checkbox-test");
let lenth = chekObj.length;
let checked = 0;
let checkboxTest;
for (i = 0; i < lenth; i++) {
if (chekObj[i].checked === true) {
checked += 1;
checkboxTest = chekObj[i].getAttribute("id");
console.log(checkboxTest);
}
}
if (checked >= 2){
alert("한 가지만 선택해 주세요");
return false;
}
});
'프로그래밍 공부 > html & css' 카테고리의 다른 글
html (0) | 2020.10.25 |
---|