首页 \ 问答 \ 如果未勾选复选框,则JavaScript会显示表格的其余部分,如果其中一个或两个是隐藏的,则隐藏它(Javascript display rest of the form if no checkboxes are ticked, hide if 1 or 2 of them are)

如果未勾选复选框,则JavaScript会显示表格的其余部分,如果其中一个或两个是隐藏的,则隐藏它(Javascript display rest of the form if no checkboxes are ticked, hide if 1 or 2 of them are)

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';
    }
}

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>

I'm trying to get the rest of my form to display if both of the checkboxes have remained empty (following the submit/continue button). However, at the moment it shows regardless of how many are ticked.

Following this, If both are ticked how would I go about a message coming up saying: Sorry, we can't continue or similar?

Is this relatively easy to make or quite complicated?

I have the following 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>

The JS:

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

原文:https://stackoverflow.com/questions/39676621
更新时间:2022-05-12 20:05

最满意答案

首先,你不应该多次使用一个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>


First of all, you shouldn't use an id more than once; that's a bad practice. secondly, use the .checked property to get the checked state of a checkbox, then use the logical AND operator (&&); to check if both the first and the second checkboxes are not checked.

edit: updated code to include #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>

相关问答

更多

相关文章

更多

最新问答

更多
  • 如何重新加载下拉列表(How to reload dropdownlist)
  • RStudio:在脚本中保留特殊字符(RStudio: keeping special characters in a script)
  • Powershell的“GetLatest”不会在新的TFS工作区上下载文件(“GetLatest” with Powershell doesn't download files on new TFS workspace)
  • 我如何让JS识别一个由字符组成的数组?(How do I get JS to recognise an array insted of characters?)
  • EF从存储过程中急切加载(EF eager loading from stored procedure)
  • 将输出文件添加到Python扩展(Adding output file to Python extension)
  • 淮北职业技术学院电脑应用专业咋样?
  • 更改默认扩展面板箭头的箭头样式(Change arrow style for default expansion panel arrow)
  • 芜湖计算机(计算机)培训机构(培训班,学校)哪家好
  • 致命错误:使用clang-llvm ASTMatcher时未找到'stddef.h'文件(fatal error: 'stddef.h' file not found when using clang-llvm ASTMatcher)
  • 内容的.NET缓存(Contentful .NET caching)
  • 客户端没有发生WCF回调(WCF callback is not happening in client)
  • 使用friend在全局范围内调用类成员函数会产生27个错误(Calling a Class member function in Global Scope using friend Gives 27 ERRORS)
  • 如何绑定到WPF中的另一个控件属性(How to Bind to Another Control Property in WPF)
  • 南华大学电脑专业,就业好不好
  • 是否存在泄密文件的官方(或常见)文件扩展名或后缀?(Is there an official (or common) file extention or suffix for deflated files?)
  • 在SVM python中只训练一次(Training only once in SVM python)
  • 淘汰自定义绑定光滑js无法正常工作(knockout custom binding for slick js not working)
  • 似乎无法正确地抓住网站“福布斯”(Can't seem to scrape the website “Forbes” properly)
  • 无法使用boto.rds2从describe_instance方法检索有关db实例的信息(Not able to retrieve information about db instances from the describe_instance method using boto.rds2)
  • 转换为英国日期格式问题(Convert to british date format issue)
  • 在表中列出不同的元组(10种方法)(List distinct tuples in a table(SQL query)(10 ways))
  • OrientDB查询比较(OrientDB query compare)
  • 全局变量有什么不好?(What is so bad about global variables? [duplicate])
  • 为什么JavaMail Transport.send()是一个静态方法?(Why is JavaMail Transport.send() a static method?)
  • 获取最近3个Instagram图像张贴在一个地方(Get last 3 instagram images posted in a place)
  • 使用libnfc格式化/读/写NDEF Mifare 1K卡(Format/Read/Write NDEF Mifare 1K Card using libnfc)
  • 阻止谷歌索引特定图像(Block Google from indexing a particular image)
  • 消息模板接收让Dispatcher没有订阅频道(Message Template receive gives Dispatcher has no subscribers for channel)
  • OpenShift:使用自定义节点版本(OpenShift: Use custom node version)