使用onclick更改Javascript变量

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

var=false；
生菜

if（生菜==true）{
文件。填写（“45”）；
}

---

谢谢

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

var=false；
生菜

函数my_函数（）{
if（生菜==true）{
生菜=假；
}否则{
生菜=真；
文件。填写（“45”）；
}
}

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

第二，尽量避免使用html中的Javascript：

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

var=false；
生菜

document.getElementById（'莴苣'）。addEventListener（'click'，check莴苣，false）；
函数check（）{
if（document.getElementById（'莴苣'）。checked==true）{
生菜=真；
文件。填写（“45”）；
} 
其他的
{
生菜=假；
}
}

---

工作演示：

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

生菜

胡萝卜

凉豆

胡椒粉

单击函数（莴苣）{
if（生菜）
警惕（“你动了莴苣！”）；
其他的
警惕（“你换了别的蔬菜！”）；
}

莴苣

函数重新计算（）
if（生菜==true）{
文件。填写（“45”）；
}
}

---

首先，您需要

onchange

事件，该事件在复选框的状态更改时调用。

this.checked

根据该状态返回布尔值（true或false）。其次，当页面加载脚本时，

if

语句只处理一次。将其放入函数中以再次调用。

设置

莴苣=true

不会导致if语句运行。您只需要编写一个函数，当您的复选框被单击时，该函数将运行

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

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

莴苣

函数functionName（）{
文件。填写（“45”）；
}

---

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

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

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

莴苣

var chkLettuce=document.getElementById（“chkLettuce”）；
chkLettuce.onclick=chkLettuce.click=function（）{
莴苣=！！chkLettuce.checked；
if（生菜）{
警觉（“45或任何”）；
}
}

上面也添加了注释——if语句上面的注释问题不是问题所在。-1莴苣始终为真，因为onchange在选中和禁用时都会触发unchecked@AlienWebguy当前位置我在重读我的帖子后立即发现了这一点。它已经改变了。我被大约4个人鞭打了一下，得到了答案“哈哈-1”，这将使莴苣成为真的，但它永远不会使它倒退。那部分要求在哪里呢？OP可以让代码的其他部分将其设置为假的。但不管怎样，我还是编辑了它。-1你的代码强制莴苣始终为真：@AlienWebGuy，它在onclick中设置为真，就像他想要的那样。当负1的功能与OP的预期功能相同时，没有理由使用负1。@AlienWebGuy，它不是强制为true，因为他可以轻松地用false作为参数调用该函数，但在他的示例代码中，他在onclick中将其设置为true，这基本上就是它所做的。复选框是一个切换符。让我问你这个问题-你会在你自己的网站上使用你提供的代码吗？假设JQuery当然是被禁止的。@AlienWebGuy不哈哈，我会从html中删除事件处理程序并单独绑定它，但这对初学者来说很混乱，所以我把它留给了他，我不会给我的变量命名为莴苣哈哈，但其他的肯定！不管我是否会使用它，它都是OP问题的正确答案，因此不需要投反对票。他可能有另一个元素，他想添加一个调用，设置为false。你不知道OP想要完成什么。

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