jquery 를 이용한 multi checkbox 선택
옆동네 답변용으로 만들어둔건데, 가끔 참조하기 좋은 코드라서 올려드립니다.
그룹별로 check박스를 나누고 선택해제를 할수 있는 코드입니다.
check box가 multi row 형태로 들어가면 필요한 기능입니다.
실행시켜보실려면 codepen link 를 클릭해서보시면 됩니다.
[code]
<div class="row">
<ul>
<li><input data-id="user1" data-type="alarm" type="checkbox" name="alarm" value="alarm">alarm</li>
<li><input data-id="user1" data-type="email" type="checkbox" name="email" value="eail">eail</li>
<li><input data-id="user1" data-type="sms" type="checkbox" name="sms" value="sms">sms</li>
</ul>
</div>
<div class="row">
<ul>
<li><input data-id="user2" data-type="alarm" type="checkbox" name="alarm" value="alarm">alarm</li>
<li><input data-id="user2" data-type="email" type="checkbox" name="email" value="eail">eail</li>
<li><input data-id="user2" data-type="sms" type="checkbox" name="sms" value="sms">sms</li>
</ul>
<hr/>
<div>
<a href="javascript:;" class="btn_checkall" data-id="user1">user1 체크all</a>
<a href="javascript:;" class="btn_uncheckall" data-id="user1">user1 체크해제</a>
</div>
<div>
<a href="javascript:;" class="btn_alarm_checkall" data-type="alarm">alarm 체크all</a>
<a href="javascript:;" class="btn_alarm_uncheckall" data-type="alarm">alarm 체크해제</a>
</div>
[/code]
[code]
$(".btn_checkall").click(function() {
var userid = $(this).data("id");
alert(userid + " check all");
$("input[data-id='" + userid + "']").prop("checked", true);
});
$(".btn_uncheckall").click(function() {
var userid = $(this).data("id");
alert(userid + " uncheck all");
$("input[data-id='" + userid + "']").prop("checked", false);
});
$(".btn_alarm_checkall").click(function() {
var type = $(this).data("type");
alert(type + " check all");
$("input[data-type='" + type + "']").prop("checked", true);
});
$(".btn_alarm_uncheckall").click(function() {
var type = $(this).data("type");
alert(type + " uncheck all");
$("input[data-type='" + type + "']").prop("checked", false);
});
[/code]
댓글 1개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4443 | ||
| 2694 | 2개월 전 | 203 | ||
| 2693 | 2개월 전 | 162 | ||
| 2692 | 2개월 전 | 169 | ||
| 2691 | 2개월 전 | 183 | ||
| 2690 | 2개월 전 | 336 | ||
| 2689 | 2개월 전 | 247 | ||
| 2688 |
|
2개월 전 | 450 | |
| 2687 | 3개월 전 | 302 | ||
| 2686 |
선택과집중
|
3개월 전 | 339 | |
| 2685 | 3개월 전 | 301 | ||
| 2684 | 3개월 전 | 361 | ||
| 2683 | 3개월 전 | 492 | ||
| 2682 | 3개월 전 | 285 | ||
| 2681 | 3개월 전 | 311 | ||
| 2680 |
선택과집중
|
3개월 전 | 283 | |
| 2679 | 3개월 전 | 339 | ||
| 2678 |
|
3개월 전 | 437 | |
| 2677 |
|
3개월 전 | 510 | |
| 2676 | 3개월 전 | 334 | ||
| 2675 | 3개월 전 | 311 | ||
| 2674 |
선택과집중
|
3개월 전 | 489 | |
| 2673 |
|
3개월 전 | 328 | |
| 2672 | 3개월 전 | 346 | ||
| 2671 | 3개월 전 | 293 | ||
| 2670 | 3개월 전 | 269 | ||
| 2669 | 3개월 전 | 381 | ||
| 2668 | 3개월 전 | 297 | ||
| 2667 |
선택과집중
|
3개월 전 | 496 | |
| 2666 |
선택과집중
|
4개월 전 | 478 | |
| 2665 |
선택과집중
|
4개월 전 | 418 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기