버튼 클릭시 value값 전달에 대해 문의드립니다.
본문
아래소스 기준으로 확인 버튼 클릭시 버튼에 value 값이 it_num에 value값에 입력하고 싶은데
어덯게 하면 가능할가요? 소스를 여기저기 찾아봐도 찾을수가 없네요.
<section id="sel_option">
<ul>
<li class="opt_list">
<input class="it_num" type="hidden" value="0">
<button class="it_btn" type="button" value="50"><span class="sound_only">확인</span></button>
</li>
<li class="opt_list">
<input class="it_num" type="hidden" value="0">
<button class="it_btn" type="button" value="100"><span class="sound_only">확인</span></button>
</li>
</ul>
</section>
답변 4
<section id="sel_option">
<ul>
<li class="opt_list">
<input class="it_num" type="hidden" value="0">
<button class="it_btn" type="button" data-num="50"><span class="sound_only">확인</span></button>
</li>
<li class="opt_list">
<input class="it_num" type="hidden" value="0">
<button class="it_btn" type="button" data-num="100"><span class="sound_only">확인</span></button>
</li>
</ul>
</section>
<script>
$(function() {
$('.it_btn').on('click', function() {
var num = $(this).data('num');
$(this).closest('li').find('.it_num').val(num);
});
});
</script>
한가지 더 도움 부탁드립니다.
<input class="it_num[33312][]" type="hidden" value="0"> 이렇게 it_num 배열값으로 돼있을때 $(this).closest('li').find('.it_num').val(num); 이소스를 어덯게 수정해서 사용해야될가요?
$(this).closest('li').find('input').val(num);
답변 감사합니다.
근데 input “li”안에 여러개 있는 상황이라 ㅠㅠ
$(this).closest('li').find('[class^=it_num]').val(num);
jquery로 간단하게 하시는게 좋아보여요
간단하게 샘플만들어봤어요. 다음URL에서 확인해보세요.
https://www.webgift.kr/0729/sample1.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<section id="sel_option">
<ul>
<li class="opt_list">
<input class="it_num" type="hidden" value="0">
<button class="it_btn" type="button" data-num="50"><span class="sound_only">확인</span></button>
</li>
<li class="opt_list">
<input class="it_num" type="hidden" value="0">
<button class="it_btn" type="button" data-num="100"><span class="sound_only">확인</span></button>
</li>
</ul>
</section>
<script>
$(function() {
$('.it_btn').on('click', function() {
var num = $(this).data('num');
$(this).parent('li').find('.it_num').val(num);
});
});
</script>
ㅋㅋ 넵 어쩔수없죠 도움이 되셨다면 그것으로도 좋은것 같아요 :)
<button id="demo" onclick="myFunction()" value="50">Go</button>
<input id="demo1" type="hidden" value="">
<script>
function myFunction() {
var str = document.getElementById("demo").value;
document.getElementById("demo1").value = str;
}
</script>
질문의 경우 버튼 바로 앞에 위치하니까 아래처럼 간단하게 지정 가능합니다. * DOM 공부 추천
$('.it_btn').on('click', function() {
$(this).prev().val($(this).data('num'));
});