HTML和Javascript根据所选单选按钮显示不同的Widget

ezykj2lf  于 2023-05-12  发布在  Java
关注(0)|答案(2)|浏览(117)

在选择单选按钮时，用户应该看到不同的内容，但由于某种原因它不起作用。我将显示问题 Package 在div标签下，但它没有返回它应该返回的内容。下面是所提到的问题的代码片段。

function displayPersonOrCompanySearchFields(personSearchAreaId='person-search-states', companySearchAreaId='company-search-states') {
    const personSearchField = document.getElementById('person-search-field');
    const companySearchField = document.getElementById('company-search-field');

    const personSearchArea = document.getElementById(personSearchAreaId);
    const companySearchArea = document.getElementById(companySearchAreaId);

    const personSearchOtherSources = document.getElementById('person-search-other-sources');
    const companySearchOtherSources = document.getElementById('company-search-other-sources');

    const subjectType = getSubjectType();

    if (subjectType === 'person-subject') {
        personSearchArea.style.display = 'block';
        if (personSearchOtherSources) personSearchOtherSources.style.display = 'block';
        personSearchField.style.display = 'block';

        companySearchArea.style.display = 'none';
        if (companySearchOtherSources) companySearchOtherSources.style.display = 'none';
        companySearchField.style.display = 'none';
    } else if (subjectType === 'company-subject') {
        companySearchArea.style.display = 'block';
        if (companySearchOtherSources) companySearchOtherSources.style.display = 'block';
        companySearchField.style.display = 'block';

        personSearchArea.style.display = 'none';
        if (personSearchOtherSources) personSearchOtherSources.style.display = 'none';
        personSearchField.style.display = 'none';
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="canada.css"> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script defer src="/canada.js"></script>
        <title>MESA Canada</title>
    </head>
    <body>
        <div class="container">
            <p class="title">MESA Canada</p>
        </div>
        <div id="company-search-field">
        <input style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert company name here">
        </input>
        </div>
        <div id="person-search-field" style="display: none;">
        <input style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert person name here">
        </input>
        </div>
        <br></br>
        <div class="search-subject" style="margin-left: 1rem;">
            <input type="radio" onclick="displayPersonOrCompanySearchFields(); resetSearchFields()" id="person-subject" name="subject-type" value="person-subject" checked>
            <label for="person-subject">Company</label>
            <input type="radio" onclick="displayPersonOrCompanySearchFields(); resetSearchFields()" id="company-subject" name="subject-type" value="company-subject">
            <label for="company-subject">Person</label>
        </div>
        <br></br>
        <!-- WHEN COMPANY IS SELECTED -->
        <div class="subject-name-search">
        <div id="subject-search-form">
        <div id="company-search-states">
        <div class="states-dropdown-list">
        <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;">
            <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Records</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
            <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 26rem; background-color: black;">
                <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
                </svg>
            </div>
            <ul class="states-dropdown" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
                <li><label><input type="checkbox" name="company-subject" class="state" value="supreme-court" checked>Federal Level</label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="supreme-court">Alberta<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="jakarta">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="aceh">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="bali">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="bangka-belitung">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="banten">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="bengkulu">Ontario<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-java1">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-java2">Quebec<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-kalimantan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-papua">Northwest Territories</label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-sulawesi">Nunavut</label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="east-java1">Yukon</label></li>
            </ul>
            <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
            <br>
            <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
            <br></br>
            <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                    <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Corporate Records</button>
            <br></br>
            <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                    <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Litigation Cases</button>
        </form>
        </div>
        <!-- WHEN PERSON IS SELECTED -->
        <div id="person-search-states" style="display: none;">
        <div class="states-dropdown-list">
        <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen; display: none;">
            <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Affiliations</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
            <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 28rem; background-color: black;">
                <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
                </svg>
            </div>
            <ul class="states-dropdown" id="provinces-list" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
                <li><label><input type="checkbox" name="person-subject" class="state" value="supreme-court" checked>Federal Level</label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="supreme-court">Alberta<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="jakarta">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="aceh">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="bali">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="bangka-belitung">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="banten">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="bengkulu">Ontario<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-java1">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-java2">Quebec<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-kalimantan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-papua">Northwest Territories</label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-sulawesi">Nunavut</label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="east-java1">Yukon</label></li>
            </ul>
            <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
            <br>
            <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
            <br></br>
            <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                    <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Corporate Records</button>
            <br></br>
            <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                    <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Litigation Cases</button>
        </form>
        </div>
        </div>
        </div>
        </div>
        </div>
    </body>
</html>

是否有一种方法来呈现单选按钮选择时应该显示的内容？

JavaScript

2条答案

按热度按时间
whitzsjs

whitzsjs1#

你的代码很难读，而且有很多错误。
首先，看看你有什么。

<input type="radio" onclick="displayPersonOrCompanySearchFields(); resetSearchFields()" id="person-subject" name="subject-type" value="person-subject" checked>
<label for="person-subject">Company</label>
<input type="radio" onclick="displayPersonOrCompanySearchFields(); resetSearchFields()" id="company-subject" name="subject-type" value="company-subject">
<label for="company-subject">Person</label>
  • label* 是Company，但detail（id，value）是Person（反之亦然）

第二个是“收音机”。

onclick="displayPersonOrCompanySearchFields(); resetSearchFields()"

这不应该像你想的那样运行。您应该检查如何在一个onclick上执行多个函数。
第三，const subjectType = getSubjectType();缺失。
最后

<div id="person-search-states" style="display: none;">

然后

<form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen; display: none;">

实际上没有必要隐藏表单。
有很多点要调试，很难一一说明，所以请安排你的代码。
我只是安排了一些代码，所以你可以用这个作为你的 scratch。

function displayPersonOrCompanySearchFields(){
  let person = document.getElementById("person-subject");
  let company = document.getElementById("company-subject");
  let person_states = document.getElementById("person-search-states");
  let company_states = document.getElementById("company-search-states");
  let person_field = document.getElementById("person-search-field");
  let company_field = document.getElementById("company-search-field");
  
  if(person.checked === true){
    person_states.style.display = "block";
    person_field.style.display = "block";
    company_states.style.display = "none";
    company_field.style.display = "none";
  }else{
    company_states.style.display = "block";
    company_field.style.display = "block";
    person_states.style.display = "none";
    person_field.style.display = "none";
  }
}
<div class="container">
    <p class="title">MESA Canada</p>
</div>
<div id="company-search-field">
  <input style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert company name here" />
</div>
<div id="person-search-field" style="display: none;">
  <input style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert person name here" />
</div>
<br></br>
<div class="search-subject" style="margin-left: 1rem;">
  <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="company-subject" name="subject-type" value="company-subject" checked>
  <label for="company-subject">Company</label>
  <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="person-subject" name="subject-type" value="person-subject">
  <label for="person-subject">Person</label>
</div>
<br></br>
<!-- WHEN COMPANY IS SELECTED -->
<div id="company-search-states">
  <div class="states-dropdown-list">
    <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;">
        <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Records</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
        <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 26rem; background-color: black;">
            <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
            </svg>
        </div>
        <ul class="states-dropdown" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
            <li><label><input type="checkbox" name="company-subject" class="state" value="supreme-court" checked>Federal Level</label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="supreme-court">Alberta<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="jakarta">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="aceh">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="bali">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="bangka-belitung">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="banten">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="bengkulu">Ontario<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="central-java1">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="central-java2">Quebec<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="central-kalimantan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="central-papua">Northwest Territories</label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="central-sulawesi">Nunavut</label></li>
            <li><label><input type="checkbox" name="company-subject" class="state" value="east-java1">Yukon</label></li>
        </ul>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
        <br>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openBankruptcyTabs();">
            <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
            </svg>
            Search Corporate Records</button>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openBankruptcyTabs();">
            <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
            </svg>
            Search Litigation Cases</button>
    </form>
  </div>
</div>
<!-- WHEN PERSON IS SELECTED -->
<div id="person-search-states" style="display: none;">
  <div class="states-dropdown-list">
    <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;;">
        <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Affiliations</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
        <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 28rem; background-color: black;">
            <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
            </svg>
        </div>
        <ul class="states-dropdown" id="provinces-list" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
            <li><label><input type="checkbox" name="person-subject" class="state" value="supreme-court" checked>Federal Level</label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="supreme-court">Alberta<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="jakarta">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="aceh">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="bali">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="bangka-belitung">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="banten">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="bengkulu">Ontario<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="central-java1">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="central-java2">Quebec<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="central-kalimantan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="central-papua">Northwest Territories</label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="central-sulawesi">Nunavut</label></li>
            <li><label><input type="checkbox" name="person-subject" class="state" value="east-java1">Yukon</label></li>
        </ul>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
        <br>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openBankruptcyTabs();">
            <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
            </svg>
            Search Corporate Records</button>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openBankruptcyTabs();">
            <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
            </svg>
            Search Litigation Cases</button>
    </form>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-05-12
iszxjhcz

iszxjhcz2#

首先，确保你有正确的布局，添加display: none到单亲，你有多个display: none的人的选择选项列表。
在onchange中也使用一个函数，并将this作为参数传递，这将使检查当前选择的值变得容易。
下面是更新后的代码：

/* inputs */
const personSearchField = document.getElementById('person-search-field');
const companySearchField = document.getElementById('company-search-field');

/* select options */
const personSearchArea = document.getElementById('person-search-states');
const companySearchArea = document.getElementById('company-search-states');

function handleChange(e) {
  if (e.value === "company-subject") {
    personSearchField.style.display = "none"
    personSearchArea.style.display = "none"
    companySearchField.style.display = "block"
    companySearchArea.style.display = "block"
  } else {
    companySearchArea.style.display = "none"
    companySearchField.style.display = "none"
    personSearchField.style.display = "block"
    personSearchArea.style.display = "block"
  }
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="canada.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script defer src="/canada.js"></script>
    <title>MESA Canada</title>
  </head>

  <body>
    <div class="container">
      <p class="title">MESA Canada</p>
    </div>
    <div id="company-search-field">
      <input style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert company name here" />
    </div>
    <div id="person-search-field" style="display: none;">
      <input style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert person name here" />
    </div>
    <br />
    <div class="search-subject" style="margin-left: 1rem;">
      <input type="radio" onclick="handleChange(this)" id="company-subject" name="subject-type" value="company-subject" checked>
      <label for="company-subject">Company</label>
      <input type="radio" onclick="handleChange(this)" id="person-subject" name="subject-type" value="person-subject">
      <label for="person-subject">Person</label>
    </div>
    <br />
    <div class="subject-name-search">
      <div id="subject-search-form">
        <!-- WHEN COMPANY IS SELECTED -->
        <div id="company-search-states">
          <div class="states-dropdown-list">
            <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;">
              <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Records</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
              <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 26rem; background-color: black;">
                <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path>
                </svg>
              </div>
              <ul class="states-dropdown" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
                <li><label><input type="checkbox" name="company-subject" class="state" value="supreme-court" checked>Federal Level</label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="supreme-court">Alberta<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="jakarta">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="aceh">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="bali">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="bangka-belitung">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="banten">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="bengkulu">Ontario<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-java1">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-java2">Quebec<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-kalimantan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-papua">Northwest Territories</label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="central-sulawesi">Nunavut</label></li>
                <li><label><input type="checkbox" name="company-subject" class="state" value="east-java1">Yukon</label></li>
              </ul>
              <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
              <br>
              <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
              <br />
              <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                  <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Corporate Records</button>
              <br />
              <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                  <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Litigation Cases</button>
            </form>
          </div>
        </div>
        <!-- WHEN PERSON IS SELECTED -->
        <div id="person-search-states" style="display: none;">
          <div class="states-dropdown-list">
            <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;">
              <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Affiliations</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
              <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 28rem; background-color: black;">
                <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path>
                </svg>
              </div>
              <ul class="states-dropdown" id="provinces-list" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
                <li><label><input type="checkbox" name="person-subject" class="state" value="supreme-court" checked>Federal Level</label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="supreme-court">Alberta<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="jakarta">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="aceh">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="bali">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="bangka-belitung">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="banten">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="bengkulu">Ontario<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-java1">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-java2">Quebec<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-kalimantan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-papua">Northwest Territories</label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="central-sulawesi">Nunavut</label></li>
                <li><label><input type="checkbox" name="person-subject" class="state" value="east-java1">Yukon</label></li>
              </ul>
              <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
              <br>
              <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
              <br />
              <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                  <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Corporate Records</button>
              <br />
              <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openBankruptcyTabs();">
                <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                  <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                </svg>
                Search Litigation Cases</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
赞(0）分享  回复(0）举报  2023-05-12
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com