Jquery 单击复选框显示或隐藏内容块
Jquery Show or hide content block on click on checkbox
我点击某个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);
}
});
});
最初 class 命名的内容默认有 display: none
在每个输入复选框上添加关联内容的引用 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
}
});
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>
我点击某个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);
}
});
});
最初 class 命名的内容默认有 display: none
在每个输入复选框上添加关联内容的引用 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
}
});
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>