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

jQuery 변수 관련 질문드릴게요.

컨텐츠몰 10% 할인 기간연장!
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
jQuery 변수 관련 질문드릴게요.

QA

SIR 컨텐츠몰 10% 특별할인 - 코로나19 바이러스로 어려운 시기, SIR이 함께 하겠습니다.

jQuery 변수 관련 질문드릴게요.

본문

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $(document).ready(function() {
    $("input[type='checkbox']").on('click', function() {
      //checkbox 형태의 input태그 가 클릭될 때 다음 함수를 실행한다.
      var write = '';
      //write 변수 선언
      $("input[type='checkbox']:checked").each(function() {
        //checked 된 input 태그들 각각 write 변수에 내용을 합친다.
        write += $(this).data("name");
      });
      $('#tdbox').val(write);
      //textarea 에 write 에 담긴 내용 셋팅
    });
    $('#alls').on('click', function() {
      var alltext = '';
      $("input[type='checkbox']").prop('checked', true).each(function(index) {
        alltext += $(this).data("name")
      });
      $('#tdbox').val(alltext)
    });
    $('#allr').on('click', function() {
      $('input').prop('checked', false)
      $('#tdbox').val('');
    });
  });
</script>
<!--body 부분 -->
<body>
  <input type="checkbox" name="sport1" value='1' id="sport1" data-name='축구 '>축구
  <input type="checkbox" name="sport1" value='1' id="sport2" data-name='야구 '>야구
  <input type="checkbox" name="sport1" value='1' id="sport3" data-name='농구 '>농구
  <input type="checkbox" name="sport1" value='1' id="sport4" data-name='배구 '>배구
  <input type="checkbox" name="sport1" value='1' id="sport5" data-name='탁구 '>탁구
  <input type="checkbox" name="sport1" value='1' id="sport6" data-name='하키 '>하키
  <br>
  <button id="alls">전체선택</button>
  <button id="allr">전체해제</button>
  <br>
  <input type="checkbox" name="pet1" value='1' id="pet1">강아지
  <input type="checkbox" name="pet2" value='1' id="pet2">고양이
  <input type="checkbox" name="pet3" value='1' id="pet3">토깽이
  <input type="text" name="tdbox" id="tdbox" class="tdbox" size="40">
</body>

 

3696779805_1564923084.2544.png

[그림1]

3696779805_1564923114.374.png

[그림2]

 

그림에 있는 jsfiddle 주소입니다.

https://jsfiddle.net/ncia/wexuhj87/38/

 

jQuery로 체크박스 선택시 인풋박스에 값을 전달하려는데 막히네요.

두개의 그룹이 있는데 위에그룹은 스포츠그룹 밑에그룹은 펫그룹입니다.

 

목적은 위에 스포츠 그룹만 체크박스를 선택하여 인풋박스에 나오게 하려는데 밑에 펫그룹이 체크가 되어있으면 undefined라고 입력이 되어있네요.

 

스포츠그룹만 체크를 하면 나오게 할수 있는지 밑에 펫그룹은 영향을 받지 않도록(undefined가 나오지 않도록) 할수 있는지욧

 

고수님들 도움요청드릴게요.

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 3

채택됨

릴보이즈님의 답변

div를 클래스 이름을 줘서 그 스포츠만 묶어두세요

그러고 선택자를 .sptgroup input[type='checkbox'] 이렇게 해두세요

주소복사
채택됨
답변의 댓글

열린이글님의 답변

위소스로 멀 하려는 건지 알수없지만

 

그냥 딱봐도

data-name='강아지'

data-name='고양이' 등이 없써서 나오는  undefined 메시지인듯한데

주소복사
답변의 댓글
앤시아님의 댓글
아네 열린이글님 답글 고맙습니다.

그게 두번째 체크박스 그룹은 인풋박스에 표시를 하지 않으려고 일부러 뺀거거던요.

첫번째 그룹만 인풋박스에 표시하려는데 막히네요. 방법이 있을듯한데요.

릴보이즈님의 답변

버튼은 일단 type을 붙여줘야되요 안그럼 서브밋인지 버튼인지 문제가 발생하구요 

그리고 스포츠 그룹만할거면 input:checkbox[name=''sport1"] 이렇게해서 선택자를 해두시고요 

그래도 안된다 싶으면 div로 감싸서 클래스이름주고 .group input:checkbox[name=''sport1"] 이렇게 해보세요

 

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 173
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여5 회 시작20.04.06 08:27 종료20.04.13 08:27
  2. 참여41 회 시작20.04.04 09:21 종료20.04.11 09:21

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

© SIRSOFT