Javascript变量随onclick改变答案

【问题标题】：Javascript variable change with onclickJavascript变量随onclick改变
【发布时间】：2011-10-16 05:02:00
【问题描述】：

我想在复选框中更改一个变量，该变量会导致 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>

谢谢！

【问题讨论】：

上面还添加了 cmets -- if 语句上方的注释问题不是问题。

标签： javascript variables checkbox onclick

【解决方案1】：

将 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>

【讨论】：

-1 这会将 lettuce 设置为 true，但永远不会将其设置回来。
那部分要求在哪里？
好吧，OP 本可以让代码的其他部分将其设置为 false。但无论如何，我还是编辑了它。

【解决方案2】：

首先，您的逻辑永远不会将 lettuce 设置为 false。我知道我们应该多吃生菜，但我们还是应该给用户一个选择；）

其次，尽量不要让你的 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/

【讨论】：

【解决方案3】：

您需要在 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>

【讨论】：

-1 您的代码强制 lettuce 始终为真：jsfiddle.net/AlienWebguy/QaYJ4
@AlienWebGuy，它在 onclick 中设置为真，就像他想要的那样。当它具有与 OP 预期的功能相同的功能时，没有理由负 1。
@AlienWebGuy，这不是强制为真，因为他可以很容易地以 false 作为参数调用该函数，但在他的示例代码中，他在 onclick 中将其设置为 true，这本质上是完全正确的这是做什么的。
复选框是一个切换器。让我问你这个问题 - 你会在你自己的网站上使用你提供的代码吗？假设当然 JQuery 是被禁止的。
@AlienWebGuy 不哈哈，我会从 html 中删除事件处理程序并单独绑定它，但这对初学者来说很困惑，所以我把它留给他，我不会命名我的变量生菜哈哈，但其他那肯定！而且无论我是否使用它，它都是对 OP 问题的正确答案，因此不值得反对。他可能有另一个元素，他想添加一个调用来设置生菜为假。你不知道 OP 想要完成什么。

【解决方案4】：

<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 根据该状态返回布尔值（真或假）。其次，if 语句仅在页面加载该脚本时处理一次。将它放在一个函数中以再次调用它。

【讨论】：

-1 lettuce 将始终为真，因为 onchange 在选中和未选中时都会触发
@AlienWebguy：我在重新阅读我的帖子后立即发现了这一点。它已经改变了。

【解决方案5】：

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

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

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

点击复选框时调用functionName()。

【讨论】：

这个答案我被大约 4 个人鞭打了哈哈

【解决方案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>

【讨论】：