JQuery、チェックボックスをクリックすると値が更新されない

jqueryで作業している小さな電卓を手に入れましたが、小さな問題があります。チェックボックスをチェックすると、フィールド1と2の入力が10で乗算されます。ただし、フィールド1と2の値を入力してチェックボックスをチェックする前に、新しい値で更新する必要はありません。JQuery、チェックボックスをクリックすると値が更新されない

誰かに私にこれを行う方法のヒントを教えてもらえますか？

ありがとうございます。

https://jsfiddle.net/02bq3h8t/

コード：

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="jquery.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $('#a1').keyup(calculate); 
       $('#a2').keyup(calculate); 
       $('#a3').keyup(calculate); 
      }); 
      function calculate(e) { 

      if ($('input.checkbox_check').is(':checked')) { 
       $('#a4').val(($('#a1').val() * $('#a2').val())*0.6); 
       $('#a3').val($('#a1').val() * $('#a2').val());   
      } else { 
       $('#a3').val($('#a1').val() * $('#a2').val()); 
       $('#a4').val($('#a3').val() * 0.5); 
      }} 
     </script> 
    </head> 
    <body> 


    <div>Lengde <input id="a1" type="text" value="0" /></div> 
    <div>Bredde <input id="a2" type="text" value="0" /></div> 
    <div><input type="checkbox" name="checkbox" class="checkbox_check"></div> 
    <div>Antall kvm <input id="a3" type="text" value="0" /></div> 
    <div>Pris <input id="a4" type="text" value="0" /></div> 
    </body> 
    </html>

出典

2017-09-05 Seb

あなたは、チェックボックスのために別のイベントを追加する必要があり、その値がチェックされた状態が変化した場合に更新します。

$(document).ready(function(){ 
    $('#a1').keyup(calculate); 
    $('#a2').keyup(calculate); 
    $('#a3').keyup(calculate); 
    $(".checkbox_check").change(calculate); 
});

出典

2017-09-05 11:42:46 Jerodev

ありがとう、それは今働いている！ :) – Seb

うれしい私は助けることができます。他のユーザーが見つけられるように、この回答を解決策としてマークすることを検討してください。 – Jerodev

あなたは、チェックボックスの状態変化のイベントハンドラを欠けています。実際にトリガした場合、値は再計算されるだけです。ちょうどあなたの$(document).ready()関数内追加：

$('input[type=checkbox]').change(calculate);

出典

2017-09-05 11:42:22

Jeppをそれをしないこと！どうもありがとうございました。 – Seb

実際には、ちょっとした間違いがありました。

チェックボックスが変更されたときに、calculate機能を呼び出さなかっただけです。関数を呼び出すためにcheckboxに添付EventListenerで作業フィドルを参照してください：

\t \t $(document).ready(function(){ 
 
\t \t  $('#a1').keyup(calculate); 
 
\t \t  $('#a2').keyup(calculate); 
 
\t \t  $('#a3').keyup(calculate); 
 
     /*---- This line was missing ----*/ 
 
     $('.checkbox_check').change(calculate); 
 
\t \t }); 
 
\t \t function calculate(e) { 
 

 
\t \t if ($('input.checkbox_check').is(':checked')) { 
 
\t \t \t $('#a4').val(($('#a1').val() * $('#a2').val())*10); 
 
\t \t \t $('#a3').val($('#a1').val() * $('#a2').val()); \t \t \t 
 
\t \t } else { 
 
\t \t \t $('#a3').val($('#a1').val() * $('#a2').val()); 
 
\t \t  $('#a4').val($('#a3').val() * 0.5); 
 
\t \t }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div>Lengde <input id="a1" type="text" value="0" /></div> 
 
<div>Bredde <input id="a2" type="text" value="0" /></div> 
 
<div><input type="checkbox" name="checkbox" class="checkbox_check"></div> 
 
<div>Antall kvm <input id="a3" type="text" value="0" /></div> 
 
<div>Pris <input id="a4" type="text" value="0" /></div> 
 
</body>

出典

2017-09-05 11:44:38 hallleron

ええ、今私が間違っていたことを見て！ありがとうございました！ :) – Seb

JQuery、チェックボックスをクリックすると値が更新されない

答えて

関連する問題