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>

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

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

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

我有以下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 的检查状态，然后使用逻辑 AND 运算符（&&）；检查第一个和第二个复选框是否都未选中。

编辑：更新代码以包含#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>

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

Javascript display rest of the form if no checkboxes are ticked, hide if 1 or 2 of them are

html

javascript

forms

jquery

submit

我有以下HTML: