英文:
HTML and Javascript to Display Different Widget Depending on Selected Radio Button
问题
Upon selecting radio buttons, users should see different content, but it is not working for some reason. I wrapped the display in question under div tag, but its not returning what its supposed to return. Below is the code snippet for the problem that was mentioned.
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.
<details>
<summary>英文:</summary>
Upon selecting radio buttons, users should see different content, but it is not working for some reason. I wrapped the display in question under div tag, but its not returning what its supposed to return. Below is the code snippet for the problem that was mentioned.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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';
}
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
Is there a way to render what is supposed to be displayed upon radio button selection?
</details>
# 答案1
**得分**: 1
你的代码难以阅读，且存在很多错误。
首先，看一下你这里有什么。
```html
<input type="radio" onclick="displayPersonOrCompanySearchFields(); resetSearchFields()" id="person-subject" name="subject-type" value="person-subject" checked>
label 是 Company 但详情(id, value) 是 Person (反之亦然)
其次是你的 radio。
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;">
实际上不必隐藏表单。
有许多需要调试的点，很难逐一指出，所以请整理你的代码。
我只整理了一些代码，你可以将其用作 草稿。
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
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";
}
}
<!-- language: lang-html -->
<div class="container">
<p class="title">MESA Canada</p>
</div>
...
英文:
Your code is hard to read and there's a lot of errors.
First, look what you have here.
<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 is Company but detail(id, value) is for Person (vice versa)
Second is your radio.
onclick="displayPersonOrCompanySearchFields(); resetSearchFields()"
This shouldn't run as you want. You should check how to do a multiple function on one onclick.
Third,const subjectType = getSubjectType(); is missing.
Lastly,
<div id="person-search-states" style="display: none;">
Then
<form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen; display: none;">
It's actually not necessary to hide the form.
There are many points to debug and hard to indicate 1 by 1, so please arrange your code.
I just arrange some of the codes, so you can use this as your scratch.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
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";
}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
以下是翻译好的部分：
首先，请确保您具有正确的布局，将display: none添加到单个父元素，您有多个display: none选项用于人员选择选项列表。
还要在onchange中使用单个函数，并将this作为参数传递，这将使检查当前选择的值变得更容易。
这是更新后的代码：
/* 输入 */
const personSearchField = document.getElementById('person-search-field');
const companySearchField = document.getElementById('company-search-field');
/* 选择选项 */
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="在此处插入公司名称" />
</div>
<div id="person-search-field" style="display: none;">
<input style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="在此处插入个人姓名" />
</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">公司</label>
<input type="radio" onclick="handleChange(this)" id="person-subject" name="subject-type" value="person-subject">
<label for="person-subject">个人</label>
</div>
<br />
<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;">公司记录</span>和<span style="color: darkgreen;">诉讼</span>研究</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-.
<details>
<summary>英文:</summary>
First, make sure you have correct layout, add `display: none` to single parent, you have multiple `display: none` for person's select options list.
Also use a single function in `onchange`, and pass `this` as a parameter, that will make it easy to check which value is currently selected.
Here is the updated code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
/* 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"
}
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论