为什么不标签显示时，我有两个复选框勾选？

Question

JavaScript：

 function Checkbox() {
//Deleted parenthesis below, because checked is a property, not a function
var FirstClass = document.getElementById("First-Class");
var Standard = document.getElementById("Standard");

if (FirstClass.checked && Standard.checked) || !FirstClass.checked && !Standard.checked) {
   // document.getElementById("CheckError").textContent = "";
    alert("Please");
}
else {
    document.getElementById("CheckError").textContent = "Please Ensure everything is covered.";
}

}

HTML：

​

<header class="main-header">  <!--- Header container for the logo and title test--->
<div class="main-logo"><h2><a href="#"><img src="img/main-logo.png"></a></h2></div>  <!---Railine Logo-->
<h1>ailLine</h1>       
</header>

  <input type="checkbox" id="Standard" name="Type" value="Standard">
<label class="light" for="Standard">Standard</label><br>

<input type="checkbox" id="First-Class" name="Type" value="First-Class">
<label class="light" for="First-Class">First Class</label><br><br>

<label id = "CheckError"></label>

<p id="total-cost"></p>
<button type = "button" value="checkout" id="checkoutbtn" onclick="Checkbox()" >CHECKOUT</button>




<!------------END OF SECOND FORM--------->           

​

大家好，在这里，如果两个复选框都是空的，我尝试做一个标签显示，我如何做到这一点，我做了一个尝试，但什么也没有发生。

Answer 1

这是为我工作的：

HTML：

<input type="checkbox" id="Standard" name="Type" value="Standard">
<label class="light" for="Standard">Standard</label><br>

<input type="checkbox" id="First-Class" name="Type" value="First-Class">
<label class="light" for="First-Class">First Class</label><br><br>

<label id = "CheckError"></label>

<p id="total-cost"></p>
<!-- Assign click event on JS script -->
<button type = "button" value="checkout" id="checkoutbtn" onclick="myFunction(); createcookie(); AdultNumber(); calculateFare();" >CHECKOUT</button>

Javascript：

document.getElementById("checkoutbtn").onclick = Checkbox;

function Checkbox() {
    //Deleted parenthesis below, because checked is a property, not a function
    var FirstClass = document.getElementById("First-Class").checked;
    var Standard = document.getElementById("Standard").checked;

    if ((FirstClass && Standard) || (!FirstClass && !Standard)) {
        // Show the message when only one is checked
        document.getElementById("CheckError").textContent = "Please Ensure everything is covered.";
    }
    else {
        // Set empty string in other case
        document.getElementById("CheckError").textContent = "";
    }
}

现在，"FirstClass“和"Standard”变量是布尔变量，因此不必在if条件中使用.checked属性。

Answer 2

您的代码工作正常，在这一行中只有少量语法错误：

if ((FirstClass.checked && Standard.checked) || (!FirstClass.checked && !Standard.checked)) {

你少了一些括号..。

Codepen：http://codepen.io/anon/pen/JGPpWG