Jquery单击复选框显示或隐藏内容块答案

【问题标题】：Jquery Show or hide content block on click on checkboxJquery单击复选框显示或隐藏内容块
【发布时间】：2021-12-30 13:44:26
【问题描述】：

单击某个checkbox 时我有几个复选框，我想显示一些内容（在我的情况下，这是一个简单的块示例）当单击另一个复选框时，前一个块应该隐藏并显示新块，我认为要解决此问题，您需要应用 forEach 复选框为我工作，但我无法显示块

  <div class="toggle-two">
    <div><small>content 1</small></div>
    <label class="switch-label">
      <input class="switch" id="switch-novice" value="switch-novice"  type="checkbox"/>
       <span class="slider round"></span>
    </label>
  </div>
  
  <div class="toggle-three">
    <div><small>content 2</small></div>
    <label class="switch-label">
      <input class="switch" id="switch-intermediate" value="switch-intermediate"  type="checkbox"/>
      <span class="slider round"></span>
    </label>
  </div>
  
  <div class="toggle-four">
    <div><small>content 3</small></div>
    <label class="switch-label">
      <input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
      <span class="slider round"></span>
    </label>
  </div>

  <!-- ------------------------------------------- -->
  
  </div>
  <div>
    <div class="content c1"></div>
    <div class="content c2"></div>
    <div class="content c3"></div>
  </div>

**script.js**

let uploadPres = document.getElementsByClassName("content");

$(".content").each(function (index, value) {
  $(`.switch:not([checked])`).on("change", function (param1, param2) {
    $(".switch").not(this).prop("checked", false);

    if ($(".switch").is(":checked")) {
      console.log(this.checked);
    }
  });
});

最初一个名为 content 的类默认有display: none

你也可以看到this example in codesandbox

【问题讨论】：

如果您选中了一个复选框，并且您选中了另一个复选框，那么第一个复选框是否应该保持选中状态，但它显示的块应该被隐藏？此外，您可以使用Stack Snippets 在 Stack Overflow 上提供一个可运行的示例，这样人们就不必去其他网站了。

标签： javascript jquery arrays checkbox

【解决方案1】：

在每个输入复选框上添加相关内容 div 的引用，如下所示。

<input class="switch" id="switch-novice" value="switch-novice"  type="checkbox" data-content="c1"/>
 OR
<input class="switch" id="switch-novice" value="switch-novice"  type="checkbox" data-content="c2"/>

现在只需更新您的代码，如下所示。

$(`.switch`).on("change", function (a, b) {
  $(".switch").not(this).prop("checked", false);

  if ($(".switch").is(":checked")) {
    var contentToOpen = $(this).data("content"); // read the associated class of the div

    $(`.content`).hide(); // hide all existing opened ones
    $(`.${contentToOpen}`).show(); // show the associated one
  }
});

【讨论】：

【解决方案2】：

function toggle(event){
  var container = event.target.closest(".togglers");
  var currentContainer = event.target.closest(".toggle");
  var index = Array.from(container.children).indexOf(currentContainer);
  
  var checkboxes = document.querySelectorAll(".toggle input");
  $(checkboxes).prop("checked",false);
  $(event.target).prop("checked", true);

  var contentItems = document.querySelectorAll(".content-items .content");
  $(contentItems).hide();
  var content = contentItems[index];
  $(content).slideToggle();
}

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togglers">
  <div class="toggle"><input type="checkbox" onclick="toggle(event)" />
    toggle 1
   </div>
  <div class="toggle"><input type="checkbox" onclick="toggle(event)" />
    toggle 2
   </div>
  <div class="toggle"><input type="checkbox" onclick="toggle(event)" />
    toggle 3
   </div>
</div>

<div class="content-items">
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
</div>

【讨论】：