Scenario: 체크박스를 만들어 jQuery로  선택된 체크박스 value 들을 가져오고, 결과에 밑에 띄워준다. 두번째 부터는 결과에 있는 요소들을 지워준디 다시 그려준다.



Solutions: 아래


Ps. 어려웠던점

1. jQuery 선택자와 결과밑에 check value를 띄워줄때, 맨처음엔 after로 했엇는데 아무리해도 안지워 지는것이다. 여기서 많은 고민을함.

  차라리 Text 삽입시에 append를 사용하면 그 객체들이 전부 child 가 되기때문에 지워주기가 쉬움.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>여러 개의 취미를 체크박스에서 선택하고 결과보기-:checkbox</title>
  6. <style>
  7. div {padding: 5px 5px 5px 5px}
  8. .item { float: left;    width: 100px;}
  9. </style>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
  11.     <script type="text/javascript">
  12.     $(function(){
  13.         $('#selectBtn').click(function(){
  14. //          console.log(('#contents'));
  15.             $('#contents').children().text(""); //모든자식 지우기(새로 선택된결과를 띄우기위해서)
  16. //          $('#contents').children('p').text(""); P인자식만 해당
  17.              $('input:checkbox').each(function() { //[name=??] 로특정 체크박스만 불러오기가능
  18.                  if(this.checked)
  19.                     $('#contents').append('<p>'+this.value);
  20.              });
  21.         });
  22.     });
  23.    
  24.     </script>
  25.    
  26.  
  27. </head>
  28. <body>
  29.     <div>
  30.     <span class="item"> 음악감상 </span> <input type="checkbox" name="hobby" value="music">
  31.     </div>
  32.     <div>
  33.         <span class="item"> 요가 </span> <input type="checkbox" name="hobby"  value="yoga">
  34.     </div>
  35.     <div>
  36.         <span class="item"> 독서 </span> <input type="checkbox" name="hobby"  value="reading">
  37.     </div>
  38.     <div>
  39.         <input type="button" id="selectBtn" value="취미 선택">
  40.     </div>
  41.     <div id="contents">결과</div>
  42. </body>
  43. </html>


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기  (0) 2017.02.16
[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16
[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기  (0) 2017.02.09
[JavaScript][펌]유용한 Array 메소드들  (0) 2017.02.07

+ Recent posts

티스토리툴바