입력 값을 Onclick으로 설정하십시오.

Question

입력 양식 onclick을 변경하고 싶습니다. 시도했지만 입력 값이 변경되지 않습니다. 오류를 찾을 수 없습니다. 예를 들어 choice-label을 클릭하면 input에 value 5이 표시됩니다.

$('.training-niveau .choice-label').click(function() { 
 
    $('#train-niveau').val(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field training-niveau-icon training-niveau"> 
 
    <input id="train-niveau" class="train-niveau" name="train-niveau" value="1" type="radio" aria-required="true" autocomplete="off"> 
 
    <li class="choice-line thirst-line"> 
 
    <div class="choice-wrapper"> 
 
     <div class="choice-label">4</div> 
 
     <div class="choice-line"></div> 
 
     <div class="choice-container"> 
 
     <div class="choice-inset"></div> 
 
     <div class="choice-bg"></div> 
 
     <div class="choice-bd"></div> 
 
     <div class="choice-overlay"></div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</div>

Answer 1

$('#train-niveau').val(this);

은 입력 값을 레이블의 jquery 객체에 설정하고 있습니다.

클릭 기능 this 내부 사용 $('#train-niveau').val($(this).text());

Answer 2

this의 값이 아니라 기능과 값 (이 값을 원하는 경우 console.log(this);을 검증하기의 전체 집합을 포함하지 않습니다, 대신를 사용

값이 원하는 라벨로 설정되어있는 경우에만 적용

$('#train-niveau').val(this.val()); <.

Answer 3

IT는 jQuery 대상이 아닌, 일반 자바 스크립트 DOM 요소입니다. 당신이 .val()를 사용하려면 당신은 그냥 단지 document object에 끌어 this를 호출

$('.training-niveau .choice-label').click(function(){ 
    var $this = $(this); 
    $('#train-niveau').val($this.val()); 
}); 

Answer 4

변수 자바 스크립트에 this 변환해야합니다.

$('.training-niveau').on('click', '.choice-label', function() { 
 
    console.log($('#train-niveau').val()); //before 
 
    $('#train-niveau').val($(this).text()); 
 
    console.log($('#train-niveau').val()); //after 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field training-niveau-icon training-niveau"> 
 
    <input id="train-niveau" class="train-niveau" name="train-niveau" value="1" type="radio" aria-required="true" autocomplete="off"> 
 
    <li class="choice-line thirst-line"> 
 
    <div class="choice-wrapper"> 
 
     <div class="choice-label">4</div> 
 
     <div class="choice-line"></div> 
 
     <div class="choice-container"> 
 
     <div class="choice-inset"></div> 
 
     <div class="choice-bg"></div> 
 
     <div class="choice-bd"></div> 
 
     <div class="choice-overlay"></div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</div>