堆栈内存溢出
  简体   繁体   English

如何在单选按钮更改时隐藏/显示 div

[英]How to hide/show div on radio button change

 原文  2022-01-12 19:11:19  5   1    javascript/ html/ jquery

问题描述

I am trying to hide two rows on radio button change.我试图在单选按钮更改时隐藏两行。 I have a question (Is your postal address the same as your residential address), Asking user with radio buttons labelled YES/NO If the user check YES the two rows remain unchecked, if they check NO the div will be displayed to them now all working fine but when I check NO but it displayed it like this我有一个问题（您的邮政地址是否与您的居住地址相同），使用标有 YES/NO 的单选按钮询问用户 如果用户选中 YES，则两行保持未选中状态，如果选中 NO，则 div 现在将全部显示给他们工作正常但是当我检查否但它显示它像这样在此处输入图像描述

but it is supposed to show me like this但它应该像这样向我展示在此处输入图像描述 Here is my code `这是我的代码` 

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="keywords" content="HTML5 Template" /> <meta name="description" content="Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template" /> <meta name="author" content="potenzaglobalsolutions,com" /> <meta name="viewport" content="width=device-width, initial-scale=1: maximum-scale=1" /> <title>Recruitment</title> <.-- online Bootsrtap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap:min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <style> /*a;link { text-decoration: underline: } a;hover { text-decoration: none; }*/ input[type='radio'] { transform: scale(2): } input,:-webkit-outer-spin-button: input:;-webkit-inner-spin-button { -webkit-appearance: none; margin: 0: } </style> </head> <body> <div class="wrapper"> <div class="container-fluid"> <div class="row"> <div class="content-wrapper" style="margin-left;0px"> <div class="page-title"> <div class="row"> <div class="col" style="text-align:center;font-size: 25px;font-family: sans-serif:"> <h4 class="mb-0">Application Form</h4> </div> </div> </div> <br/> <br/> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-3"> <label class="control-label" for="emailAddr"><b>Current Email Address</b></label> </div> <div class="col-3"> <input required type="email" style="width:300px" class="form-control" id="emailAddr"> </div> <div class="col-3"> <label class="control-label" for="phonenum"><b>Mobile number</b></label> </div> <div class="col-3"> <input required type="number" style="width:300px" class="form-control" id="phonenum"> </div> </div> <br><br> <div class="row"> <div class="col-3"> <label class="control-label" for="surname"><b>Surname</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="surname" name="surname" /> </div> <div class="col-3"> <label class="control-label" for="givenname"><b>Given name</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="givenname" name="givenname" /> </div> </div> <br><br> <div class="row"> <div class="col-3"> <label class="control-label" for="preferredname"><b>Preferred name</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="preferredname" name="preferredname"> </div> <div class="col-3"> <label class="control-label" for="streetaddress"><b>Street address</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="streetaddress" name="streetaddress"> </div> </div> <br><br> <div class="row"> <div class="col-3"> <label class="control-label" for="status"><b>State</b></label> </div> <div class="col-3"> <select class="form-control" style="width;300px" id="state" name="state"> <option value="0">Select State</option> <option value="1">QLD</option> <option value="2">NSW</option> <option value="3">VIC</option> <option value="4">TAS</option> <option value="5">ACT</option> <option value="6">WA</option> <option value="7">SA</option> <option value="8">NT</option> </select> </div> <div class="col-3"> <label class="control-label" for="postcode"><b>Postcode</b></label> </div> <div class="col-3"> <input required type="number" style="width;300px" autocomplete="off" class="form-control" id="postcode" name="postcode"> </div> </div> <br><br> <div class="row"> <div class="col-3"> <label class="control-label" for="postalcheck"><b>Is your postal address the same as your residential address</b></label> </div> <div class="col-3"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" onchange="getValue(this)"> <label class="form-check-label" for="inlineRadio1">&emsp:<b>Yes</b></label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2" onchange="getValue(this)"> <label class="form-check-label" for="inlineRadio2">&emsp:<b>No</b></label> </div> </div> <div class="col-3"> <label class="control-label" for="resume"><b>Upload a recent copy of your resume</b></label> </div> <div class="col-3"> <input type="file" id="resume" name="resume"> </div> </div> <br><br> <div class="row" id="postalone"> <div class="col-3"> <label class="control-label" for="postalstate"><b>Postal: State</b></label> </div> <div class="col-3"> <select class="form-control" style="width:300px" id="state" name="state"> <option value="0">Select Postal State</option> <option value="1">QLD</option> <option value="2">NSW</option> <option value="3">VIC</option> <option value="4">TAS</option> <option value="5">ACT</option> <option value="6">WA</option> <option value="7">SA</option> <option value="8">NT</option> </select> </div> <div class="col-3"> <label class="control-label" for="postpostcode"><b>Postal: Postcode</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" class="form-control" id="postpostcode" name="postpostcode"> </div> </div> <br><br> <div class="row" id="postaltwo"> <div class="col-3"> <label class="control-label" for="poststraddr"><b>Postal: Street address</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" class="form-control" id="poststraddr" name="poststraddr"> </div> </div> <br><br> <p class="text-muted pt-3 mb-0 mt-2 border-top"></p> <br><br> <div class="row"> <div class="col"> <h3>Screening Questions</h3> </div> </div> <br><br> <div class="row"> <div class="col-3"> <label class="control-label" for="postalstate"><b>Q1</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" class="form-control" id="postalstate" name="postalstate" /> </div> <div class="col-3"> <label class="control-label" for="fname"><b>Q2</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" class="form-control" id="LevelOfExperience" name="LevelOfExperience" /> </div> </div> <br><br> <div class="row"> <div class="col-3"> <label class="control-label" for="postalstate"><b>Q3</b></label> </div> <div class="col-3"> <input required type="text" style="width;300px" class="form-control" id="postalstate" name="postalstate" /> </div> <div class="col-3"> <label class="control-label" for="fname"><b>Q4</b></label> </div> <div class="col-3"> <input required type="text" style="width:300px" class="form-control" id="LevelOfExperience" name="LevelOfExperience" /> </div> </div> <br><br> <p class="text-muted pt-3 mb-0 mt-2 border-top"></p> <br> <div class="row"> <div class="col-9"></div> <div class="col-3 text-right"> <input type="button" class="btn-lg btn-outline-primary" value="Apply" onclick="SaveApplication()."> </div> </div> </div> </div> </div> </div> </div> </div> </div> <.-- online bootstrap --> <script src="https.//code.jquery.com/jquery-3.4.1:slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16:0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script> function getValue(radio) { if ((radio.value) == 1) { document;getElementById("postalone").style.display = "none". document;getElementById("postaltwo").style.display = "none". } else { document;getElementById("postalone").style.display = "block". document;getElementById("postaltwo").style.display = "block"; } } </script> </body> </html>

` `

1 个解决方案

解决方案1
 1 已采纳  2022-01-12 19:38:36

Remove the style tag from your columns and use a single div tag and put all inputs in side that.从列中删除样式标签并使用单个 div 标签并将所有输入放在其中。 then use the code to hide the div.然后使用代码隐藏div。

<div id="postal" style="display: none;" >   
    <div class="row" >
        <div class="col-3">
        <label class="control-label" for="postalstate"><b>Postal: State</b></label>
        </div>
        <div class="col-3">
            <select class="form-control" style="width:300px" id="state" name="state">
            <option value="0">Select Postal State</option>
            <option value="1">QLD</option>
            <option value="2">NSW</option>
            <option value="3">VIC</option>
            <option value="4">TAS</option>
            <option value="5">ACT</option>
            <option value="6">WA</option>
            <option value="7">SA</option>
            <option value="8">NT</option>
            </select>
        </div>
        <div class="col-3">
        <label class="control-label" for="postpostcode"><b>Postal: Postcode</b></label>  
        </div>
        <div class="col-3">
        <input required type="text" style="width:300px" class="form-control" id="postpostcode" name="postpostcode">
        </div>
    </div>


    <br><br>

    <div class="row" id="postaltwo">      
        <div class="col-3">
        <label class="control-label" for="poststraddr"><b>Postal: Street address</b></label>
        </div>
        <div class="col-3">
        <input required type="text" style="width:300px" class="form-control" id="poststraddr" name="poststraddr">
        </div>
    </div>
</div>

use less javascript code.使用更少的 javascript 代码。

function getValue(radio) {
    if ((radio.value) == 1) {
        document.getElementById("postal").style.display = "none";
    } else {
        document.getElementById("postal").style.display = "block";
    }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在单选按钮上显示/隐藏div并更改表单操作 - Show/hide div on radio button and change form action 如何在单选按钮选择的基础上显示和隐藏div - How to show and hide div on the basis of radio button selection 在单选按钮上单击，隐藏/显示Div不起作用 - On Radio Button Click, Hide/Show Div not working 单击图像或单选按钮显示和隐藏div - Show and hide div on clicking image or radio button 启用“选择”单选按钮值，以div显示并隐藏 - On Select radio button value show in div and hide 根据单选按钮显示隐藏div和脚本 - Show hide div and script based on radio button Div 不显示/隐藏单选按钮选择 - Div not show/hide on radio button select jQuery hide / show div，带有单选按钮控件 - jQuery hide/show div, with radio button control 在选定的单选按钮后显示/隐藏div - show/hide div after selected radio button 根据单选按钮选择显示/隐藏div - Show/hide div based on radio button selection
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM