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

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

例，

 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>

来源

2015-11-24 JavaLearner1

虽然取消选中该复选框，你重新设置结果值。根据页面值计算值。

请尝试下面的代码。

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>

希望这会帮助你。

来源

2015-11-24 05:07:46 balachandar

它正在工作！谢谢@balachandar – JavaLearner1

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

回答

相关问题