實時更新值，如果複選框被選中或不是

我想根據是否選中複選框來更新文本框。感謝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'發生任何改變，則'複選框'的內容將被刪除 –

發生之後<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

實時更新值，如果複選框被選中或不是

回答

相關問題