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>
[그림1]
[그림2]
그림에 있는 jsfiddle 주소입니다.
https://jsfiddle.net/ncia/wexuhj87/38/
jQuery로 체크박스 선택시 인풋박스에 값을 전달하려는데 막히네요.
두개의 그룹이 있는데 위에그룹은 스포츠그룹 밑에그룹은 펫그룹입니다.
목적은 위에 스포츠 그룹만 체크박스를 선택하여 인풋박스에 나오게 하려는데 밑에 펫그룹이 체크가 되어있으면 undefined라고 입력이 되어있네요.
스포츠그룹만 체크를 하면 나오게 할수 있는지 밑에 펫그룹은 영향을 받지 않도록(undefined가 나오지 않도록) 할수 있는지욧
고수님들 도움요청드릴게요.
답변 3
div를 클래스 이름을 줘서 그 스포츠만 묶어두세요
그러고 선택자를 .sptgroup input[type='checkbox'] 이렇게 해두세요
좀더 자세한 답변 부탁드립니다.
그니까 스포츠 체크박스에 div로 감싸주고 클래스 이름 지정해서 선택자로 쓰세요 ㅋㅋ
답글 감사합니다. 덕분에 해결됐습니다..
위소스로 멀 하려는 건지 알수없지만
그냥 딱봐도
data-name='강아지'
data-name='고양이' 등이 없써서 나오는 undefined 메시지인듯한데
아네 열린이글님 답글 고맙습니다.
그게 두번째 체크박스 그룹은 인풋박스에 표시를 하지 않으려고 일부러 뺀거거던요.
첫번째 그룹만 인풋박스에 표시하려는데 막히네요. 방법이 있을듯한데요.
버튼은 일단 type을 붙여줘야되요 안그럼 서브밋인지 버튼인지 문제가 발생하구요
그리고 스포츠 그룹만할거면 input:checkbox[name=''sport1"] 이렇게해서 선택자를 해두시고요
그래도 안된다 싶으면 div로 감싸서 클래스이름주고 .group input:checkbox[name=''sport1"] 이렇게 해보세요
