[英]How can I toggle the visibility of a div when a checkbox is checked with CSS?
I've tried several ways to do this including through javascript but I cannot figure it out.我已经尝试了几种方法来做到这一点,包括通过 javascript,但我无法弄清楚。 I have a table, and the header contains a "select all" checkbox with a checkbox attached to each entry.
我有一个表,header 包含一个“全选”复选框,每个条目都有一个复选框。
applicable html:适用html:
<table>
<thread>
<tr>
<th class="border-top-0"><input type="checkbox" id="selectAll" value="selectAll"></th>
</tr>
</thread>
<tbody>
<td>
<%= check_box_tag "contacts[]", contact.id %>
</td>
Ideally, what I would like to happen is for a hidden div to display when any checkbox is checked.理想情况下,我希望在选中任何复选框时显示一个隐藏的 div。 I was partially able to accomplish this through Javascript with:
我通过 Javascript 部分地能够完成这个:
var checkboxes = document.querySelectorAll('input#contacts_');
//var selectAll = document.querySelector('input#selectAll');
var checkCount = 0;
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
checkbox.checked ? checkCount++ : checkCount--;
checkCount > 0 ? actionsContainer.style.opacity = '1': actionsContainer.style.opacity = '0';
console.log(checkCount)
});
});
However, when the "select all" checkbox is checked, the other checkboxes are not registered as being checked and I cannot get the hidden div to show unless a contact is unselected and then reselected.但是,当检查“选择所有”复选框时,其他复选框未注册为被检查,除非未选择联系然后重新选择联系人,否则我将无法显示隐藏的div。 I've also tried adding a separate event listener to the
selectAll
variable with messy results.我还尝试向
selectAll
变量添加一个单独的事件侦听器,但结果一团糟。
So I'm trying a CSS solution along the lines of:所以我正在尝试 CSS 解决方案:
input[type='checkbox']:checked.mobile-actions {
opacity: 1;
}
figuring that if every checkbox is an input[type="checkbox"]
they would all be touched and the mobile-actions div would display.计算如果每个复选框都是
input[type="checkbox"]
它们都会被触摸并且移动操作 div 会显示。 But this doesn't seem to work either.但这似乎也不起作用。 How can I get this done?
我怎样才能完成这个?
Add a class to the table <table class='items'>
在表
<table class='items'>
添加一个 class
Create event listener for click on that entire class and handle it based on clicked item.为点击整个 class 创建事件侦听器,并根据点击的项目处理它。 For example:
例如:
const itemsTable = document.querySelector('.items'); const items = document.querySelectorAll('.item'); // Class of each item itemsTable.addEventListener('click', (e) => { const traget = e.target.className; if(target === 'selectAll') { for(const n of items) { if(n.parentNode.parentNode.hidden === true) n.parentNode.parentNode.hidden = false; if(n.checked === true) console.log('I am checked'); if(n.checked === false) console.log('I am unchecked'); } } if(target === 'item') { /// Do something } }
The same way inside this listener you can listen to individual item click, so you don't add event listener for every item separately.以同样的方式在这个监听器中你可以监听单个项目的点击,所以你不需要为每个项目单独添加事件监听器。
At the same time you are checking/unchecking an item, you can change its style to hide it or whatever you want.在您选中/取消选中某个项目的同时,您可以更改其样式以隐藏它或任何您想要的东西。
I was finally able to solve the issue with Javascript:我终于能够通过 Javascript 解决问题:
document.addEventListener('change', function() {
arr = [];
checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (i = checkboxes.length -1; i >= 0; i--) {
if (checkboxes[i].checked) {
arr.push(checkboxes[i].value);
}
}
arr.length > 0 ? actionsContainer.style.opacity = '1' : actionsContainer.style.opacity = '0'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.