如何使用纯javascript取消选中一个复选框？
如何使用纯javascript取消选中一个复选框？
提问于 2018-10-25 05:10:19
我想要实现的目标：
我想创建一个复选框。当用户单击复选框时，我想要一个窗口打开。在新打开的窗口中将有多个单选按钮。如果用户单击其中一个单选按钮，则窗口外的复选框将取消选中，框将消失
问题：
- 在代码中，反向不起作用。
- radio = check to checkbox = uncheck之间的连接不起作用。
码
let box = document.querySelector('.dd_box')
let ddCb = document.querySelector('#dd_cb')
let ddRb = document.querySelector('.dd_rb')
// play normal
ddCb.addEventListener('change', () => {
box.classList.add('active')
})
// play in reverses
ddRb.addEventListener('click', () => {
box.style.opacity = 0 // avoid showing the init style while switching the 'active' class
box.classList.add('in-active')
box.classList.remove('active')
// force dom update
setTimeout(() => {
box.classList.add('active')
box.style.opacity = ''
}, 5)
box.addEventListener('animationend', onanimationend)
})
function onanimationend() {
box.classList.remove('active', 'in-active')
box.removeEventListener('animationend', onanimationend)
}body {
background-color: rgba(30, 30, 30);
}
#dropdown {
width: 500px;
height: 300px;
top: 50px;
left: 100px;
position: absolute;
}
#dropdown input[type=checkbox] {
display: none;
}
.dd_bttn
/*clickable button*/
{
width: 25px;
height: 25px;
top: 0px;
left: -25px;
position: absolute;
z-index: 10;
background-color: darkorange;
cursor: pointer;
}
.dd_bttn:hover {
background-color: purple;
}
.dd_box {
width: 100%;
height: 100%;
top: 0px;
left: 50%;
position: absolute;
transform: scale(0);
background: grey;
}
@keyframes zzzib {
0% {
transform: translate(-50%) scale(0);
background-color: red;
}
20% {
transform: translateX(-50%) scale(0.9);
}
100% {
transform: translateX(-50%) scale(1);
}
}
.dd_box.active {
animation: zzzib 1s forwards;
animation-timing-function: ease-in-out;
}
.dd_box.in-active {
animation-direction: reverse;
animation-timing-function: ease-in-out;
}<div id="dropdown">
<input type="checkbox" id="dd_cb">
<label id="dd_label" for="dd_cb">
<div class="dd_bttn"></div>
</label>
<div class="dd_box">
<input type="radio" class="dd_rb" name="rb">
<input type="radio" class="dd_rb" name="rb">
<input type="radio" class="dd_rb" name="rb">
</div>
</div>Stack Overflow用户
发布于 2018-10-25 14:48:30
需要为每一个添加事件，我已经测试了javascrip并完成了工作
var inputs = document.querySelectorAll("input[type=radio]"),
x = inputs.length;
while (x--)
inputs[x].addEventListener("change", function() {
alert('click');
box.style.opacity = 0 // avoid showing the init style while switching the 'active' class
box.classList.add('in-active')
box.classList.remove('active')
// force dom update
setTimeout(() => {
box.classList.add('active')
box.style.opacity = ''
}, 5)
box.addEventListener('animationend', onanimationend)
}, 0);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008916
复制相关文章
相似问题
腾讯云开发者
