ふたりで

jquery+ checkbox selected control by radio button+ 라디오 버튼에 의한 체크박스 컨트롤 하기 본문

javascript

jquery+ checkbox selected control by radio button+ 라디오 버튼에 의한 체크박스 컨트롤 하기

graykang 2022. 11. 4. 13:59
728x90
반응형
SMALL

업무 공백 중 머리를 놀리기 싫어서 간단하게 실무에서 종종 사용하는 기능을 정리도 할 겸 연습해 보았다...

 

상단의 라디오 버튼에 의해 다중 리스트의 체크박스를 컨트롤 하는 방법이다.

-결과 화면: https://graykang.w3spaces.com/chkbox-select-by-radio-button.html

 

JS Bin

 

graykang.w3spaces.com

- html 소스

parent와 children 체크박스 소스에 data 속성 값으로 parent 와 children 간의 연간 관계 값이 세팅되어있고 

children 체크 박스는 2종류로 구분 되는 값을 data 속성 값으로 추가로 가지고 있다.

parent와 children 간의 연관 관계 및 상단의 라디오 버튼 클릭에 해당되는 parent와 children의 체크 또는 체크해제를

하는 기능이 구현 되어있다.

  
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
  <style>
  </style>
</head>
<body>
    <div>
        <input type="radio" class="radioChk" name="radioChk" value="A" title="전체"/><strong>전체</strong>
        <input type="radio" class="radioChk" name="radioChk" value="T" title="T"/><strong>T</strong>
        <input type="radio" class="radioChk" name="radioChk" value="G" title="G"/><strong>G</strong>
    </div>
    <div>
        <ul>
        <input type="checkbox" class="prantChk" value="부모1" data-type="1"/><strong>부모1</strong>
            <li>
                <input type="checkbox" class="childChk " value="상품1" data-type="T" data-ptype="1"/><strong>T상품1</strong>
            </li>
             <li>                
                <input type="checkbox" class="childChk " value="상품2" data-type="G" data-ptype="1"/><strong>G상품2</strong>
            </li>
        </ul>
        <ul>
        <input type="checkbox" class="prantChk" value="부모2" data-type="2"/><strong>부모2</strong>
            <li>
                <input type="checkbox" class="childChk " value="상품3" data-type="T" data-ptype="2"/><strong>T상품3</strong>                
            </li>
        </ul>
        <ul>
        <input type="checkbox" class="prantChk" value="부모3" data-type="3"/><strong>부모3</strong>
            <li>
                <input type="checkbox" class="childChk " value="상품4" data-type="T" data-ptype="3"/><strong>T상품4</strong>
            </li>
             <li>
                <input type="checkbox" class="childChk " value="상품5" data-type="T" data-ptype="3"/><strong>T상품5</strong>                
            </li>
            <li>
                <input type="checkbox" class="childChk " value="상품6" data-type="G" data-ptype="3"/><strong>G상품6</strong>                
            </li>
        </ul>
    </div>

<script>
$(document).ready(function(){
    //라디오버튼에 의한 체크박스 컨트롤-start
	$('.radioChk').on('click', function(){
        console.log($(this).val());
        if($(this).val() === 'A'){
            $('.prantChk').prop('checked', true).trigger('change');
        }
        if($(this).val() === 'T'){
            $('.childChk').each(function(){
            $(this).prop('checked', false).trigger('change');
                if($(this).data('type') === 'T'){
                console.log($(this).data('type')); 
                    $(this).prop('checked', true).trigger('change');
                }
            });
        }
        if($(this).val() === 'G'){
            $('.childChk').each(function(){
            $(this).prop('checked', false).trigger('change');                        
                if($(this).data('type') === 'G'){
                console.log($(this).data('type')); 
                    $(this).prop('checked', true).trigger('change');
                }
            });
        }
    });
    //-end
    //-부모 체크박스에 의한 자식 체크박스 컨트롤-start
    $('.prantChk').on('change', function(){
        if($(this).is(':checked')){
            var parent_Type = $(this).data('type');
            $('.childChk').each(function(){
                if($(this).data('ptype') === parent_Type){
                    $(this).prop('checked', true).trigger('change');
                }
            });
        }else{
            var parent_Type = $(this).data('type');
            $('.childChk').each(function(){
                if($(this).data('ptype') === parent_Type){
                    $(this).prop('checked', false).trigger('change');
                }
            });
        }
    });
});

</script>
</body>
</html>
728x90
반응형
LIST
저작자표시

'javascript' 카테고리의 다른 글

ajax+post+csrf+spring+security  (0) 2023.01.06
jquery progressbar by button event(버튼에 의한 진행율 표시)  (0) 2022.11.08
javascript+jquery+submit+loading 로딩중 표시 하기  (0) 2022.11.01
jquery+javascript 전화번호 자동완성 및 유효성검사  (0) 2022.10.28
moden javascript attribute data get set (선택요소의 data값 가져오기, 수정하기 moden javascript방법)  (0) 2022.10.27
'javascript' Related Articles more
Comments