チェックボックスがチェックされている場合は、ライブアップデート値

チェックボックスのチェックを付けたかどうかに基づいてテキストボックスを更新しようとしています。 this postのおかげで、うまく動作するテキストボックスが得られましたが、値を更新するためのチェックボックスを取得できません。私は何が欠けていますか？ <form>チェックボックスがチェックされている場合は、ライブアップデート値

理由後

<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

をクリックします（）document.ready –

にあなたが状況を取得したいです。もし何らかの変更が 'textfield'に起こるなら'チェックボックス 'の' –

場所<script>タグを：

htmlページが読み込まれると、それは行ずつ解釈されます。 click()に来ると、jQueryはその時点でDOMにロードされないinput[name="selectedItems1"]という要素を見つけようとします。だから、jQueryはそのチェックボックスにclick()イベントハンドルを添付しません。それがあなたのコードがうまくいかなかった理由です。

出典

2016-09-15 04:38:19

この試してみてください：あなたは$（ '入力[名前= "selectedItems1を"]'）に置く必要があります

<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

チェックボックスがチェックされている場合は、ライブアップデート値

答えて

関連する問題