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的，点击复选框后，值不会更新

回答

相关问题