在复选框上单击运行函数的问题

时间:2017-04-21 20:44:32

标签: javascript dom checkbox

我正在试图弄清楚如何制作一个onclick复选框功能,所以我想我会做一个小小的例子。当然我看不出我做错了什么。任何帮助将不胜感激。

<!DOCTYPE html>
<html>

<title>Pizza Test</title>
  <script>
      function validatePizza(){
        if(document.getElementById('pepperoni' && 'sausage' && 
        'olives').checked = false)
          message.innerText = "What a terrible pizza";
      } else {
        message.innerText = "Exactly right";
      }
</script>

  

<h1>Which Pizza Ingredients are the best?</h1>

<h2>Pick which ingredients you like on your pizza</h2>
 <div id="ingredient_box">
  <input  type="checkbox"  id="pepperoni" value="pepperoni" 
  onclick="validatePizza();"/>
  <label for="pepperoni">Pepperoni</label>

  <input  type="checkbox"  id="sausage" value="sausage"/>
  <label for="sausage">Sasuage</label>

  <input  type="checkbox"  id="olives" value="olives"/>
  <label for="olives">olives</label>

  <input  type="checkbox"  id="mushrooms" value="mushrooms"/>
  <label for="mushrooms">mushrooms</label>

  <input  type="checkbox"  id="pineapple" value="pineapple"/>
  <label for="pineapple">pineapple</label>

  <input  type="checkbox"  id="greenPeppers" value="greenPeppers"/>
  <label for="greenPeppers">greenPeppers</label>

1 个答案:

答案 0 :(得分:0)

如果要比较两个对象,请不要使用=,而是使用=====。但是当你想要比较两个布尔值时,你不需要等号。代替if(a==false)轻松编写if(!a)

所以将代码更改为:

<script>
  function validatePizza(){
       if(!document.getElementById('pepperoni').checked && 
          !document.getElementById('sausage').checked && 
          !document.getElementById('olives').checked){
             message.innerText = "What a terrible pizza";
     } else {
             message.innerText = "Exactly right";
     }
  }
</script>