复选框单击有效，取消选中复选框不工作Javascript

Checkbox clicking works, deselecting checkbox not working Javascript

本文关键字：复选框 工作 Javascript 取消 单击 有效      更新时间：2023-09-26

我正在根据用户输入计算价格。当用户输入页数时，它将乘以2，结果将显示在#结果框中。现在，当用户单击复选框时，总（#result）值将乘以3，并显示在#result文本框中。当用户取消点击它时，旧的结果应该显示在文本框中。

示例，

      Total number of pages: 2 ---> total: 4
      checkbox clicked ----> total: 12
      checkbox unchecked ---> total: 4

当点击复选框时显示值12，但当我取消选中复选框时，值仍然是12，而不是显示4…

有人能帮我解决吗

   <html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Calculating</title>
    <script>
        function calculate() 
        {
    var myBox1 = document.getElementById('pages').value;
            if(isNaN(myBox1))
            {
                alert('Enter only numbers');
            }
            else
            {
              const myBox2=2;
              var result = document.getElementById('result');   
              var myResult = myBox1 * myBox2;
              result.value = myResult;
            }   
        }
        function checkbox1()
        {
            var result1 = document.getElementById('result').value;
            const bresult=result1;
            if(document.getElementById('ckbox').checked === true)
            {
                const checks=3;
                var myResult1=result1 * checks;
                result.value = myResult1;
            }
            if(document.getElementById('ckbox').checked === false)
            {
                result.value=bresult;
            }
        }
    </script>
 </head>
 <body>
        <table>
    <tr>
        <td>Number of Pages</td>
        <td>Check Boxes</td>
        <td>Total</td>
    </tr>    
    <tr>
        <td><input id="pages" type="text" oninput="calculate()" /></td>
        <td><input type="checkbox" id="ckbox"   onclick="checkbox1()">Assistance</td>
        <td><input id="result" /></td>
    </tr>
    </table>
    </body>
    </html>

取消选中复选框时，您将再次设置结果值。根据页面值计算该值。

请尝试以下代码。

function calculate() 
{
   var myBox1 = document.getElementById('pages').value;
   if(isNaN(myBox1))
   {
      alert('Enter only numbers');
   }
   else
   {
      const myBox2=2;
      var result = document.getElementById('result');   
      var myResult = myBox1 * myBox2;
      result.value = myResult;
    }   
}
function checkbox1()
{
   var result1 = document.getElementById('result').value;
   const bresult=result1;
   if(document.getElementById('ckbox').checked === true)
   {
      const checks=3;
      var myResult1=result1 * checks;
      result.value = myResult1;
   }
   else
   {
       var myBox1 = document.getElementById('pages').value;
       const myBox2=2;
       result.value=myBox1 * myBox2;
   }
}
<table>
    <tr>
        <td>Number of Pages</td>
        <td>Check Boxes</td>
        <td>Total</td>
    </tr>    
    <tr>
        <td><input id="pages" type="text" oninput="calculate()" /></td>
        <td><input type="checkbox" id="ckbox"   onclick="checkbox1()">Assistance</td>
        <td><input id="result" /></td>
    </tr>
</table>

希望这对你有帮助。

相关文章：