英文:
Trying to display div only when relevant checkbox is checked
问题
以下是您要翻译的内容:
"代码的目标是在选中复选框时仅显示相关的 div 元素。我添加了一个用于“标记为完整”的复选框。因此,如果我选中“标记为完整”,它将显示,如果取消选中它,它将不显示。但是,如果我选中其他复选框,它将保留在屏幕上。所以我想知道是否有一种方法在其他复选框起作用后隐藏它。在我的实际代码中,有一些 div 元素对于所有复选框都可见,所以我希望仅在选中时显示 div 元素,并在其对应的复选框取消选中时隐藏 div 元素。
let boxes = document.querySelectorAll("input[type=checkbox]");
boxes.forEach(b => b.addEventListener("change", tick));
function tick(e) {
let state = e.target.checked; // 保存更改的复选框的状态
console.log(state);
boxes.forEach(b => b.checked = false); // 清除所有复选框的选中状态
e.target.checked = state; // 恢复更改的复选框的状态
}
$("#markAsFullChange").hide();
$("[name='markAsFull']").click(function() {
if($(this).is(":checked")) {
$("#markAsFullChange").show();
} else {
$("#markAsFullChange").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm" action="" method="POST">
<p>选择其中一个复选框:</p>
<label><input name="changeLocation" type="checkbox">更改位置</label>
<label><input name="updateLocation" type="checkbox">更新位置</label>
<label><input name="retireLocation" type="checkbox">退休</label>
<label><input name="markAsFull" type="checkbox">标记为完整</label>
<label><input name="moveContents" type="checkbox">移动内容</label>
<div id="markAsFullChange">
<div>
<label>选择要标记为完整的位置:</label>
</div>
<div>
<label>在实际代码中,这里有一个下拉列表</label>
</div>
</div>
</form>
希望这有助于您的项目!"
英文:
The goal of the code is to display only relevant divs when a checkbox is checked. I added on div for Mark as a full check box. So if I check the mark as full, it will show and if I uncheck it, it won’t show. However, if I check other checkboxes, it will remain on the screen. So I was wondering if there’s a way to hide it once other checkboxes are working. In my actual code, I have some divs showing for all the checkboxes so I want to show divs only when it’s checked and hide the div once its corresponding checkbox is unchecked.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let boxes = document.querySelectorAll("input[type=checkbox]");
boxes.forEach(b => b.addEventListener("change", tick));
function tick(e) {
let state = e.target.checked; // save state of changed checkbox
console.log(state);
boxes.forEach(b => b.checked = false); // clear all checkboxes
e.target.checked = state; // restore state of changed checkbox
}
$("#markAsFullChange").hide();
$("[name='markAsFull']").click(function() {
if($(this).is(":checked")) {
$("#markAsFullChange").show();
} else {
$("#markAsFullChange").hide();
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm" action="" method="POST">
<p>Select one of the checkboxes:</p>
<label><input name="changeLocation" type="checkbox">Change Location</label>
<label><input name="updateLocation" type="checkbox">Update Location</label>
<label><input name="retireLocation" type="checkbox">Retire</label>
<label><input name="markAsFull" type="checkbox">Mark as full</label>
<label><input name="moveContents" type="checkbox">Move Contents</label>
<div id="markAsFullChange">
<div>
<label>Select a location to mark as full:</label>
</div>
<div>
<label>I have a dropdown list here in actual code</label>
</div>
</div>
</form>
<!-- end snippet -->
答案1
得分: 1
你只能使用CSS来实现这个效果,并且只能使用单选按钮(radio)。
body {
background: #EEE;
}
.tabs section {
display: none;
padding: 20px 0 0;
border: none;
}
.tabs input {
display: none;
}
.tabs label {
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 10px;
font-weight: 600;
text-align: center;
color: #000;
background: #FFF;
border: none;
}
.tabs label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
.tabs label:hover {
color: #888;
cursor: pointer;
}
.tabs input:checked + label {
color: #555;
background: rgb(205, 215, 226);
border: none;
}
.tabs #tab1:checked ~ #content1,
.tabs #tab2:checked ~ #content2,
.tabs #tab3:checked ~ #content3,
.tabs #tab4:checked ~ #content4 {
display: block;
}
<div class="tabs">
<input id="tab1" type="radio" name="tabsA" checked>
<label for="tab1">Produktbeschreibung</label>
<input id="tab2" type="radio" name="tabsA">
<label for="tab2">Material</label>
<input id="tab3" type="radio" name="tabsA">
<label for="tab3">Abmessungen</label>
<section id="content1">
Beschreibung
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
<section id="content2">
</section>
<section id="content3">
Abmessungen
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
</div>
英文:
you can only use css for that and only radio instead
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background:#EEE;
}
.tabs section {
display: none;
padding: 20px 0 0;
border:none
}
.tabs input {
display: none;
}
.tabs label {
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 10px;
font-weight: 600;
text-align: center;
color: #000;
background:#FFF;
border: none;
}
.tabs label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
.tabs label:hover {
color: #888;
cursor: pointer;
}
.tabs input:checked + label {
color: #555;
background: rgb(205, 215, 226);
border: none;
}
.tabs #tab1:checked ~ #content1,
.tabs #tab2:checked ~ #content2,
.tabs #tab3:checked ~ #content3,
.tabs #tab4:checked ~ #content4 {
display: block;
}
<!-- language: lang-html -->
<div class="tabs">
<input id="tab1" type="radio" name="tabsA" checked>
<label for="tab1">Produktbeschreibung</label>
<input id="tab2" type="radio" name="tabsA">
<label for="tab2">Material</label>
<input id="tab3" type="radio" name="tabsA">
<label for="tab3">Abmessungen</label>
<section id="content1">
Beschreibung
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
<section id="content2">
</section>
<section id="content3">
Abmessungen
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
</div>
<!-- end snippet -->
答案2
得分: 0
你可以先隐藏所有相关的div元素,然后显示适当的元素。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let boxes=document.querySelectorAll("input[type=checkbox]");
function tick(e){
let c=e.target.checked;
boxes.forEach(e=>e.checked=!1);
e.target.checked=c
}
boxes.forEach(e=>e.addEventListener("change",tick));
const checkboxes = $('#testForm input[type=checkbox]');
const associated = checkboxes.map((i, el) => document.querySelector(`#${el.name}Change`)).hide();
checkboxes.change(function(e) {
associated.hide();
$(`#${this.name}Change`).toggle(this.checked);
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm" action="" method="POST">
<p>Select one of the checkboxes:</p>
<label><input name="changeLocation" type="checkbox">Change Location</label>
<label><input name="updateLocation" type="checkbox">Update Location</label>
<label><input name="retireLocation" type="checkbox">Retire</label>
<label><input name="markAsFull" type="checkbox">Mark as full</label>
<label><input name="moveContents" type="checkbox">Move Contents</label>
<div id="markAsFullChange">
<div>
<label>Select a location to mark as full:</label>
</div>
<div>
<label>I have a dropdown list here in actual code</label>
</div>
</div>
</form>
<!-- end snippet -->
请注意,上述代码中的HTML和JavaScript部分已经翻译好了。
英文:
You can first hide all the associated div elements before showing the appropriate one.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let boxes=document.querySelectorAll("input[type=checkbox]");function tick(e){let c=e.target.checked;boxes.forEach(e=>e.checked=!1),e.target.checked=c}boxes.forEach(e=>e.addEventListener("change",tick));
const checkboxes = $('#testForm input[type=checkbox]');
const associated = checkboxes.map((i, el) => document.querySelector(`#${el.name}Change`)).hide();
checkboxes.change(function(e) {
associated.hide();
$(`#${this.name}Change`).toggle(this.checked);
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm" action="" method="POST">
<p>Select one of the checkboxes:</p>
<label><input name="changeLocation" type="checkbox">Change Location</label>
<label><input name="updateLocation" type="checkbox">Update Location</label>
<label><input name="retireLocation" type="checkbox">Retire</label>
<label><input name="markAsFull" type="checkbox">Mark as full</label>
<label><input name="moveContents" type="checkbox">Move Contents</label>
<div id="markAsFullChange">
<div>
<label>Select a location to mark as full:</label>
</div>
<div>
<label>I have a dropdown list here in actual code</label>
</div>
</div>
</form>
<!-- end snippet -->
答案3
得分: 0
以下是您要翻译的内容:
问题是因为显示/隐藏markAsFullChange
div的函数仅绑定到一个点击处理程序,即markAsFull
复选框的处理程序。其他复选框不会触发该函数。
附注1:除非您正在进行复杂的DOM遍历或使用jQuery的效果...请使用纯JS。否则,这就像使用SUV从前院到后院。
附注2:您正在使用复选框,就像收音机原生行为一样...使用收音机会节省一个函数。少量代码意味着更少的调试。
这是一个没有jQuery的解决方案。
<!-- 开始代码片段:js 隐藏:false 控制台:true Babel:false -->
<!-- 语言:lang-js -->
const checkboxes = Array.from(document.querySelectorAll("input[type='checkbox']"))
const markAsFullChange = document.querySelector("#markAsFullChange")
const resetOtherCheckboxes = (current) => checkboxes.forEach((checkbox) => {
if( checkbox !== current){
checkbox.checked = false // 取消选中其他复选框
}
})
const onChangeCheckbox = (event) => {
const target = event.target
resetOtherCheckboxes(target)
// 仅在复选框选中并且为markAsFull时显示div
markAsFullChange.style.display = target.checked && target.name === "markAsFull" ? "block" : "none"
}
checkboxes.forEach((checkbox) => checkbox.addEventListener("change", onChangeCheckbox))
<!-- 语言:lang-css -->
#markAsFullChange{
display: none;
}
<!-- 语言:lang-html -->
<form id="testForm" action="" method="POST">
<p>Select one of the checkboxes:</p>
<label><input name="changeLocation" type="checkbox">Change Location</label>
<label><input name="updateLocation" type="checkbox">Update Location</label>
<label><input name="retireLocation" type="checkbox">Retire</label>
<label><input name="markAsFull" type="checkbox">Mark as full</label>
<label><input name="moveContents" type="checkbox">Move Contents</label>
<div id="markAsFullChange">
<div>
<label>Select a location to mark as full:</label>
</div>
<div>
<label>I have a dropdown list here in actual code</label>
</div>
</div>
</form>
<!-- 结束代码片段 -->
请注意,这只是上述内容的翻译,没有其他内容。
英文:
The issue was because the function to show/hide the markAsFullChange
div only is binded to one click handler, the one for markAsFull
checkbox. Other checkboxes do not fire the function.
Side note #1, unless you are doing some complex DOM traversing or using jQuery's effects... Go for plain JS.
Else, it is like using a SUV to go from the front yard to the back yard.
Side note #2, you are using checkboxes like the radio behaves natively... Using radios would spare you a function.
Less code is less debugging.
Here is a no jQuery solution.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const checkboxes = Array.from(document.querySelectorAll("input[type='checkbox']"))
const markAsFullChange = document.querySelector("#markAsFullChange")
const resetOtherCheckboxes = (current) => checkboxes.forEach((checkbox) => {
if( checkbox !== current){
checkbox.checked = false // Uncheck others
}
})
const onChangeCheckbox = (event) => {
const target = event.target
resetOtherCheckboxes(target)
// Display the div only if the checkbox is checked and is markAsFull
markAsFullChange.style.display = target.checked && target.name === "markAsFull" ? "block" : "none"
}
checkboxes.forEach((checkbox) => checkbox.addEventListener("change", onChangeCheckbox))
<!-- language: lang-css -->
#markAsFullChange{
display: none;
}
<!-- language: lang-html -->
<form id="testForm" action="" method="POST">
<p>Select one of the checkboxes:</p>
<label><input name="changeLocation" type="checkbox">Change Location</label>
<label><input name="updateLocation" type="checkbox">Update Location</label>
<label><input name="retireLocation" type="checkbox">Retire</label>
<label><input name="markAsFull" type="checkbox">Mark as full</label>
<label><input name="moveContents" type="checkbox">Move Contents</label>
<div id="markAsFullChange">
<div>
<label>Select a location to mark as full:</label>
</div>
<div>
<label>I have a dropdown list here in actual code</label>
</div>
</div>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论