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

Question

＆＃13;

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果两个复选框都保持为空（在提交/继续按钮之后），我试图显示表单的其余部分。然而，目前它显示无论有多少被勾选。

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

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

我有以下HTML：

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

JS：

{{1}}

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>