只在相关复选框被选中时尝试显示 div。

huangapple go评论103阅读模式
英文:

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(&quot;input[type=checkbox]&quot;);
boxes.forEach(b =&gt; b.addEventListener(&quot;change&quot;, tick));
function tick(e) {
  let state = e.target.checked; // save state of changed checkbox
  console.log(state);
  boxes.forEach(b =&gt; b.checked = false); // clear all checkboxes
  e.target.checked = state; // restore state of changed checkbox
}

$(&quot;#markAsFullChange&quot;).hide();


$(&quot;[name=&#39;markAsFull&#39;]&quot;).click(function() {
  if($(this).is(&quot;:checked&quot;)) {

  $(&quot;#markAsFullChange&quot;).show();
  } else {
  $(&quot;#markAsFullChange&quot;).hide();
  }
});

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;form id=&quot;testForm&quot; action=&quot;&quot; method=&quot;POST&quot;&gt;
  &lt;p&gt;Select one of the checkboxes:&lt;/p&gt;
  &lt;label&gt;&lt;input name=&quot;changeLocation&quot; type=&quot;checkbox&quot;&gt;Change Location&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;updateLocation&quot; type=&quot;checkbox&quot;&gt;Update Location&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;retireLocation&quot; type=&quot;checkbox&quot;&gt;Retire&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;markAsFull&quot; type=&quot;checkbox&quot;&gt;Mark as full&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;moveContents&quot; type=&quot;checkbox&quot;&gt;Move Contents&lt;/label&gt;
  
 &lt;div id=&quot;markAsFullChange&quot;&gt;
   &lt;div&gt;
      &lt;label&gt;Select a location to mark as full:&lt;/label&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;label&gt;I have a dropdown list here in actual code&lt;/label&gt;
   &lt;/div&gt;
&lt;/div&gt; 
&lt;/form&gt;

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

&lt;div class=&quot;tabs&quot;&gt;
  
  &lt;input id=&quot;tab1&quot; type=&quot;radio&quot; name=&quot;tabsA&quot; checked&gt;
  &lt;label for=&quot;tab1&quot;&gt;Produktbeschreibung&lt;/label&gt;
    
  &lt;input id=&quot;tab2&quot; type=&quot;radio&quot; name=&quot;tabsA&quot;&gt;
  &lt;label for=&quot;tab2&quot;&gt;Material&lt;/label&gt;
    
  &lt;input id=&quot;tab3&quot; type=&quot;radio&quot; name=&quot;tabsA&quot;&gt;
  &lt;label for=&quot;tab3&quot;&gt;Abmessungen&lt;/label&gt;

      
  &lt;section id=&quot;content1&quot;&gt;
      Beschreibung
    &lt;p&gt;
      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.
    &lt;/p&gt;
    &lt;p&gt;
      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.
    &lt;/p&gt;
  &lt;/section&gt;
    
  &lt;section id=&quot;content2&quot;&gt;
  &lt;/section&gt;
    
  &lt;section id=&quot;content3&quot;&gt;
    Abmessungen
    &lt;p&gt;
      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.
    &lt;/p&gt;
    &lt;p&gt;
      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.
    &lt;/p&gt;
  &lt;/section&gt;
  
&lt;/div&gt;

<!-- 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(&quot;input[type=checkbox]&quot;);function tick(e){let c=e.target.checked;boxes.forEach(e=&gt;e.checked=!1),e.target.checked=c}boxes.forEach(e=&gt;e.addEventListener(&quot;change&quot;,tick));

const checkboxes = $(&#39;#testForm input[type=checkbox]&#39;);
const associated = checkboxes.map((i, el) =&gt; document.querySelector(`#${el.name}Change`)).hide();
checkboxes.change(function(e) {
  associated.hide();
  $(`#${this.name}Change`).toggle(this.checked);
});

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;form id=&quot;testForm&quot; action=&quot;&quot; method=&quot;POST&quot;&gt;
  &lt;p&gt;Select one of the checkboxes:&lt;/p&gt;
  &lt;label&gt;&lt;input name=&quot;changeLocation&quot; type=&quot;checkbox&quot;&gt;Change Location&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;updateLocation&quot; type=&quot;checkbox&quot;&gt;Update Location&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;retireLocation&quot; type=&quot;checkbox&quot;&gt;Retire&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;markAsFull&quot; type=&quot;checkbox&quot;&gt;Mark as full&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;moveContents&quot; type=&quot;checkbox&quot;&gt;Move Contents&lt;/label&gt;

  &lt;div id=&quot;markAsFullChange&quot;&gt;
    &lt;div&gt;
      &lt;label&gt;Select a location to mark as full:&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label&gt;I have a dropdown list here in actual code&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;

<!-- 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(&quot;input[type=&#39;checkbox&#39;]&quot;))
const markAsFullChange = document.querySelector(&quot;#markAsFullChange&quot;)

const resetOtherCheckboxes = (current) =&gt; checkboxes.forEach((checkbox) =&gt; {
  if( checkbox !== current){
    checkbox.checked = false  // Uncheck others
  }
})

const onChangeCheckbox = (event) =&gt; {
  const target = event.target
  resetOtherCheckboxes(target)
  // Display the div only if the checkbox is checked and is markAsFull
  markAsFullChange.style.display = target.checked &amp;&amp; target.name === &quot;markAsFull&quot; ? &quot;block&quot; : &quot;none&quot;
}

checkboxes.forEach((checkbox) =&gt; checkbox.addEventListener(&quot;change&quot;, onChangeCheckbox))

<!-- language: lang-css -->

#markAsFullChange{
  display: none;
}

<!-- language: lang-html -->

&lt;form id=&quot;testForm&quot; action=&quot;&quot; method=&quot;POST&quot;&gt;
  &lt;p&gt;Select one of the checkboxes:&lt;/p&gt;
  &lt;label&gt;&lt;input name=&quot;changeLocation&quot; type=&quot;checkbox&quot;&gt;Change Location&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;updateLocation&quot; type=&quot;checkbox&quot;&gt;Update Location&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;retireLocation&quot; type=&quot;checkbox&quot;&gt;Retire&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;markAsFull&quot; type=&quot;checkbox&quot;&gt;Mark as full&lt;/label&gt;
  &lt;label&gt;&lt;input name=&quot;moveContents&quot; type=&quot;checkbox&quot;&gt;Move Contents&lt;/label&gt;

  &lt;div id=&quot;markAsFullChange&quot;&gt;
    &lt;div&gt;
      &lt;label&gt;Select a location to mark as full:&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label&gt;I have a dropdown list here in actual code&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月13日 10:05:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76675462.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定