如果没有勾选复选框，则 Javascript 显示表单的其余部分，如果其中有 1 个或 2 个则隐藏

Question

function showHide() {
  var div = document.getElementById("hidden_div");
  if (div.style.display == 'none') {
    div.style.display = '';
  } else {
    div.style.display = 'none';
  }
}

<form method="post" name="installer" onsubmit="showHide(); return false;">

  <label>Home Keyword</label>
  <br />Are you looking to live here?
  <input id="checkbox" type="checkbox">
  <br />Are you looking to rent?
  <input id="checkbox" type="checkbox">
  <br />

  <input type="submit" value="Continue" name="submit" onsubmit="showHide()">

</form>

<div id="hidden_div" style="display:none">
  <p>Show rest of the form here when the above form is submitted with no checkboxes ticked</p>
</div>


<div id="sorry_div" style="display:none">
  <p>Sorry, we can't continue with your application.</p>
</div>

如果两个复选框都为空（在提交/继续按钮之后），我正在尝试显示表单的其余部分。但是，目前无论勾选了多少，它都会显示。

在此之后，如果两者都被勾选，我将如何处理即将出现的消息：抱歉，我们无法继续或类似？

这是相对容易制作还是相当复杂？

我有以下 HTML：

<form method="post" name="installer" onsubmit="showHide(); return false;">

    <label>Home Keyword</label>
    <br />

    Are you looking to live here? <input id="checkbox" type="checkbox"><br />
    Are you looking to rent?    <input id="checkbox" type="checkbox"><br />

    <input type="submit" value="Continue" name="submit" onsubmit="showHide()">

</form>

<div id="hidden_div" style="display:none">
    <p>Show rest of the form here when the above form is submitted with no checkboxes ticked </p>
</div>


<div id="sorry_div" style="display:none">
    <p>Sorry, we can't continue with your application.</p>
</div>

JS：

function showHide() {
    var div = document.getElementById("hidden_div");
    if (div.style.display == 'none') {
        div.style.display = '';
    }
    else {
        div.style.display = 'none';
    }
}

Answer 1

首先，您不应该多次使用 id；这是一个不好的做法。其次，使用.checked属性获取checkbox的选中状态，然后使用逻辑与运算符（&&）；检查是否未选中第一个和第二个复选框。

编辑：更新代码以包含#sorry_div。

function showHide() {
    var hiddenDiv = document.getElementById("hidden_div");
    var sorryDiv = document.getElementById("sorry_div");
    var firstCheckBox = document.getElementById("first-checkbox").checked;
    var secondCheckBox = document.getElementById("second-checkbox").checked;
    if (firstCheckBox != 1 && secondCheckBox != 1) {
        hiddenDiv.style.display = '';
        sorryDiv.style.display = 'none';
    } else {
        hiddenDiv.style.display = 'none';
        sorryDiv.style.display = '';
    }
}

<form method="post" name="installer" onsubmit="showHide(); return false;">

    <label>Home Keyword</label>
    <br />Are you looking to live here?
    <input id="first-checkbox" type="checkbox">
    <br />Are you looking to rent?
    <input id="second-checkbox" type="checkbox">
    <br />

    <input type="submit" value="Continue" name="submit" onsubmit="showHide()">

</form>

<div id="hidden_div" style="display:none">
    <p>Show rest of the form here when the above form is submitted with no checkboxes ticked</p>
</div>


<div id="sorry_div" style="display:none">
    <p>Sorry, we can't continue with your application.</p>
</div>