jquery 를 이용한 multi checkbox 선택 > 그누보드5 팁자료실

그누보드5 팁자료실

jquery 를 이용한 multi checkbox 선택 정보

jquery 를 이용한 multi checkbox 선택

본문

옆동네 답변용으로 만들어둔건데, 가끔 참조하기 좋은 코드라서 올려드립니다.

그룹별로 check박스를 나누고 선택해제를 할수 있는 코드입니다.

check box가 multi row 형태로 들어가면 필요한 기능입니다.

실행시켜보실려면 codepen link 를 클릭해서보시면 됩니다.

 

 


<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>

 


$(".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);
});
추천
1

댓글 1개

전체 30 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT