Question

我希望在一个复选框中更改一个变量，导致if语句在不重新加载页面的情况下进行计算，但我正在努力...仍在学习，抱歉！

以下是相关代码：

 <!--Variable declaration-->
 <script type="text/javascript"> var lettuce = false; </script>

 <!--The following line is within a form-->
 <input type="checkbox" onclick="lettuce=true" name="food" value="lettuce" /> Lettuce<br />

 <--the if statement-->
 <script type="text/javascript">    
      if (lettuce == true) {
    document.write("45");   
  }
 </script>

谢谢！

Answer 1

<input type="checkbox" onchange="lettuce=this.checked; recompute();" name="food" value="lettuce" /> Lettuce<br />

<script type="text/javascript">
function recompute()    
      if (lettuce == true) {
    document.write("45");   
  }
}
 </script>

首先，您需要onchange事件，当复选框的状态发生变化时，会调用该事件。 this.checked返回布尔值（true或false），具体取决于该状态。其次，当页面加载该脚本时，if语句仅处理一次。将它放在一个函数中再次调用它。

Answer 2

将if语句包装到函数中，然后在onclick事件中调用该函数。

 <!--Variable declaration-->
 <script type="text/javascript"> var lettuce = false; </script>

 <!--The following line is within a form-->
 <input type="checkbox" onclick="my_function();" name="food" value="lettuce" /> Lettuce<br />

 <!--the if statement-->
 <script type="text/javascript">
      function my_function() {
          if (lettuce == true) {
              lettuce = false;
          } else {
              lettuce = true;
              document.write("45");
          }
      }
 </script>

Answer 3

首先，你的逻辑永远不会将生菜设置为假。我知道我们应该吃更多的生菜，但我们仍然应该给用户一个选择;）

其次，尝试将您的Javascript保持在html之外：

 <!--Variable declaration-->
 <script type="text/javascript"> var lettuce = false; </script>

 <!--The following line is within a form-->
 <input type="checkbox" id="lettuce" name="food" value="lettuce" /> Lettuce<br />

 <script type="text/javascript">  
      document.getElementById('lettuce').addEventListener('click',checkLettuce,false);
      function checkLettuce(){ 

          if (document.getElementById('lettuce').checked === true) {
             lettuce = true;
             document.write("45");  
          } 
          else
          {
             lettuce = false;
          }
      }
 </script>

工作演示：http://jsfiddle.net/AlienWebguy/renut/

Answer 4

您需要在onclick中调用一个函数，因为您现在拥有的脚本：

if(lettuce == true){
    document.write("45");   
}

在你的onclick发生之前执行。

试试这个：

 <!--The following line is within a form-->
 <input type="checkbox" onclick="clicked(true);" name="food" value="Lettuce" /> Lettuce<br />
 <input type="checkbox" onclick="clicked(false);" name="food" value="Carrot" /> Carrot<br />
 <input type="checkbox" onclick="clicked(false);" name="food" value="Cool Beans" /> Cool Beans<br />
 <input type="checkbox" onclick="clicked(false);" name="food" value="Pepper" /> Pepper<br />
 <--the if statement-->
 <script type="text/javascript">    
    function clicked(lettuce){
         if(lettuce)
             alert('You toggled Lettuce!');
         else
             alert('You toggled some other vegetable!');
    }
 </script>

Answer 5

设置lettuce=true不会导致if语句运行。您只需要编写一个在单击复选框时运行的函数。

<input type="checkbox" onclick="functionName()".../>Lettuce</br/>

<script type="text/javascript">
function functionName(){
    document.write("45");
}
</script>

单击复选框时会调用functionName（）。

Answer 6

看到从html元素内联调用的javascript函数让我有点畏缩。

<input type="checkbox" id="chkLettuce" name="food" value="lettuce" /> Lettuce<br />

 <--the if statement-->

 <script type="text/javascript"> 
   var chkLettuce = document.getElementById("chkLettuce");
   chkLettuce.onclick = chkLettuce.click = function() {
      lettuce = !!chkLettuce.checked;
      if(lettuce){
         alert('45 or whatever');
      }
   }
 </script>

用onclick改变Javascript变量

6 个答案: