Django - jQuery 요소의 숨김 활용 #2

• 만성질환 유무를 조사해야하는데 만성질환 항목이 30개나 해당되어
  jQuery 요소의 숨김 .hide()  & 표시 .show() 기능을 활용할 예정이다.
• 다양한 jQuery 요소는 아래의 url를 통하여 학습 할 수 있다.
• https://www.devkuma.com/docs/jquery/%EC%9A%94%EC%86%8C%EC%9D%98-%ED%91%9C%EC%8B%9C%EC%99%80-%EC%88%A8%EA%B9%80-hide--show--toggle-/http://www.tcpschool.com/jquery/jq_effect_showingHiding
• http://www.tcpschool.com/jquery/jq_effect_showingHiding

코딩교육 티씨피스쿨

jQuery 입문 | 이펙트(effect) 효과 | 요소의 표시와 숨김 .hide() .show() .toggle()

---

요소의 표시 & 숨김

메소드	설명
.hide()	요소를 사라지게 함
.show()	요소를 나타나게 함
.toggle()	요소에 .show() 메소드와 .hide()메소드를 번갈아가며 적용

.hide() / .show() 메소드 

• .hide() 메소드를 통해 숨겨진 요소는 css display 속성값이 none으로 설정하여, 요소를 숨김
• .show(0 메소드를 통해 숨겨진 요소를 css display 속성값이 block 으로 설정하여, 요소를 표시

$("#btnHide").on("click", function() {
  $("div").hide();
});
$("#btnShow").on("click", function() {
  $("div").show();
});

 

활용

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#disease_option').hide(); //맨처음은 숨기기 위해서
            $('input[type=radio][name=cd]').change(function(){
                if(this.value == '1') {
                    $('#disease_option').show(); //예를 눌렀을때 나오게
                }
                else if (this.value == '2'){
                    $('#disease_option').hide(); //아니요 눌렀을떄 숨기게
                }
            });
        });

• 우선 jQuery를 사용하기 위해 불러온다 버전은 jQuery 홈페이지에서 확인함
  https://jquery.com/download/

Download jQuery | jQuery

• 자바스크립트 함수 정의
• ID disease_option html 요소를 맨처음에는 숨기기 위해서 .hide() 활용하여 숨김 
  * $() 의미
  • $() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성 해줌
  • $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
• if문을 활용하여 '예'를 눌렀을 때에는  .show()을 활용하여 'disease_option' 요소가 보이게 함
• '아니요' 눌렀을 때에는 .hide()을 활용하여 'disease_option' 요소를 숨기게 함