크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

컨텐츠몰 10% 할인
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드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

댓글 전체

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

회원로그인

진행중 포인트경매

  1. 참여9 회 시작20.05.27 19:24 종료20.06.01 19:24

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT