확인란이 선택되었는지 여부를 나타내는 라이브 업데이트 값

확인란의 선택 여부에 따라 텍스트 상자를 업데이트하려고합니다. this post 덕분에 텍스트 상자가 정상적으로 작동하지만 값을 업데이트하기위한 확인란을 선택할 수 없습니다. 내가 뭘 놓치고 있니?확인란이 선택되었는지 여부를 나타내는 라이브 업데이트 값

<html> 
<head> 
    <title>sum totals</title> 
    <script type="text/javascript"> 

     function calculate(t){ 
     var j = document.getElementById("output"); 
     var rege = /^[0-9]*$/; 
     if (rege.test(t.tons.value)) { 
      var treesSaved = t.tons.value * 17; 
      j.value = treesSaved; 
     } 
     else 
      alert("Error in input"); 
     } 

    $('input[name="selectedItems1"]').click(function(){ 
    var j = document.getElementById("output"); 
    if (this.checked) { 
     j.value=j.value+300 
    }else{ 
     j.value=j.value-300 
    } 
    }); 
    </script> 
</head> 
<body> 
    <form> 
     <input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/> 
     <br /> 
     <input type="checkbox" name="selectedItems1" value="val1" />I have a car 
     <br/> 
     <input type="text" id="output" value="Output" /> 
    </form> 
</body> 
</html>

출처

2016-09-15 Rilcon42

당신은 $ ('입력 [이름 = "selectedItems1을"]') 두어야 document.ready –

에서) (클릭하면 상태를 확인하고 싶습니다. 만약'textfield'에 어떤 변화가 생기면'checkbox'의' –

장소 <form>

이유 후 <script> 태그 :

HTML 페이지가로드,이 라인으로 라인을 해석 할 수 있습니다

. click()에 도달하면 jQuery는 해당 시간에 DOM에로드되지 않는 input[name="selectedItems1"] 요소를 찾으려고 시도합니다. 따라서 jQuery는 해당 체크 박스에 click() 이벤트 핸들을 첨부하지 않습니다. 이것이 코드가 작동하지 않는 이유입니다.

출처

2016-09-15 04:38:19

이 시도 :

<html> 
 
<head> 
 
    <title>sum totals</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery --> 
 
    <script type="text/javascript"> 
 

 
     function calculate(){ 
 
     var j = document.getElementById("output"); 
 
     var rege = /^[0-9]*$/; 
 
     var tons = $('#tons').val(); 
 
     if (rege.test(tons)) { 
 
      val = parseInt(tons); 
 
      var treesSaved = val * 17; 
 
      if($('input[name="selectedItems1"]').is(":checked")) 
 
      { 
 
       treesSaved = treesSaved +300; 
 
      } 
 
      else 
 
      { 
 
       treesSaved = treesSaved -300; 
 
      } 
 
      if(isNaN(treesSaved)) 
 
       j.value=0 
 
      else 
 
       j.value=treesSaved; 
 
     } 
 
     else 
 
      alert("Error in input"); 
 
     } 
 
$(function(){ 
 
    $('input[name="selectedItems1"]').change(function(){ 
 
    calculate(); 
 
}); 
 
}); 
 
    </script> 
 
</head> 
 
<body> 
 
    <form> 
 
     <input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/> 
 
     <br /> 
 
     <input type="checkbox" name="selectedItems1" value="val1" />I have a car 
 
     <br/> 
 
     <input type="text" id="output" value="Output" /> 
 
    </form> 
 
</body> 
 
</html>

출처

2016-09-15 05:38:14

확인란이 선택되었는지 여부를 나타내는 라이브 업데이트 값

답변

관련 문제