堆棧內存溢出
  簡體   English   中英

如何在單選按鈕更改時隱藏/顯示 div

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

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

問題描述

我試圖在單選按鈕更改時隱藏兩行。 我有一個問題（您的郵政地址是否與您的居住地址相同），使用標有 YES/NO 的單選按鈕詢問用戶 如果用戶選中 YES，則兩行保持未選中狀態，如果選中 NO，則 div 現在將全部顯示給他們工作正常但是當我檢查否但它顯示它像這樣在此處輸入圖像描述

但它應該像這樣向我展示在此處輸入圖像描述 這是我的代碼` 

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

從列中刪除樣式標簽並使用單個 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>

使用更少的 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並更改表單操作 如何在單選按鈕選擇的基礎上顯示和隱藏div 在單選按鈕上單擊，隱藏/顯示Div不起作用 單擊圖像或單選按鈕顯示和隱藏div 啟用“選擇”單選按鈕值，以div顯示並隱藏 根據單選按鈕顯示隱藏div和腳本 Div 不顯示/隱藏單選按鈕選擇 jQuery hide / show div，帶有單選按鈕控件 在選定的單選按鈕后顯示/隱藏div 根據單選按鈕選擇顯示/隱藏div
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM