JQuery的，點擊複選框後，值不會更新

得到了我的小計算器在jquery中工作，但我有一個小問題。當我檢查複選框時，它將字段1和2的輸入與10相乘。但是，如果我在字段1和2中輸入值，則在檢查複選框之前，它不會使用新值進行更新。JQuery的，點擊複選框後，值不會更新

能有人給我如何做到這一點的提示？

謝謝。

代碼：

<!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的，點擊複選框後，值不會更新

回答

相關問題