반응형
1. jQuery Checkbox 제어하기
HTML
<body>
색상 <br>
<input type="checkbox" id="check1" name="color" />RED
<input type="checkbox" id="check2" name="color" />BLUE
<br>
<input type="checkbox" id="checkall" name="checkall" />전체선택
</body>
1. 체크 여부 확인
$("#check1").is(":checked");
2. 체크된것 select
$("input:checkbox[name=color]:checked");
$("input:checkbox[name=color]:checked").length; // 체크된 갯수3. 체크, 체크해제하기
$("#check1").prop("checked", true); //체크하기
$("#check2").prop("checked", false); //체크해제하기
4. 체크박스 전체선택,해제
$(function(){
$("#checkall").click(function(){
var chk = $(this).is(":checked");
$("input:checkbox[name=color]").each(function() {
if(chk) $(this).prop("checked", true);
$(this).prop("checked", false);
});
});
});
2. jQuery radio 제어하기
* 기본적으로 checkbox와 raio 의 사용은 매우 흡사하다.
HTML
<body>
색상 <br>
<input type="radio" id="radio1" name="color2" checked >RED
<input type="radio" id="radio2" name="color2">BLUE
</body>
1. 체크 여부 확인
$("#radio1").is(":checked")
2. 체크된것 select
$("input:radio[name=color2]:checked");
$("input:radio[name=color2]:checked").val(); // 체크된 value
* radio 태그에 value 속성이 없으면 선택된 값으로 "on" 을 가져온다.
3. 체크, 체크해제하기
$("#radio1").prop("checked", true); //체크하기
$("#radio1").prop("checked", false); //체크해제하기
반응형
'dev > jquery' 카테고리의 다른 글
| [jquery] select 인덱스 선택 및 attribure 가져오기 (0) | 2022.10.25 |
|---|---|
| [jQuery- 플러그인] 데이트피커 (DatePicker) -Air DatePicker (0) | 2021.02.05 |
| [jQuery] 제이쿼리 클래스(Class) 생성(addClass), 삭제(removeClass), 토글(toggleClass), hasClass (0) | 2020.12.03 |
| [jQuery] 제이쿼리 select 박스 text 사용시 주의 - val, text (0) | 2020.10.26 |