테스트 사이트 - 개발 중인 베타 버전입니다

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 팁자료실

글쓰기
🐛 버그신고