用onclick改變Javascript變量

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>