Tengo varias casillas de verificación al hacer clic en una determinada checkbox de verificación, quiero mostrar algo de contenido (en mi caso, este es un bloque simple para un ejemplo) al hacer clic en otra casilla de verificación, el bloque anterior debería ocultarse y mostrar un nuevo bloque, creo para resolver este problema, debe solicitar que forEach casilla de verificación funcione para mí, pero no puedo mostrar bloques
<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); } }); }); Inicialmente, una clase denominada contenido tiene display: none de forma predeterminada
También puedes ver este ejemplo en codesandbox
en cada casilla de verificación de entrada, agregue la referencia del div de contenido asociado como se muestra a continuación.
<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"/>Ahora simplemente actualice su código como se muestra a continuación.
$(`.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 } }); 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>