我的复选框有问题。我正在尝试找到一种解决方案,即选中我的当前复选框以更改其他人的不透明度复选框。 CSS有可能吗?我用CSS输入和标签制成。这是我的代码。
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox:checked + label label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>
`
理想目标就是这样
我希望你们能理解这个问题。预先感谢
答案 0 :(得分:1)
只需删除以下声明:.styled-checkbox:checked + label label
并添加另一个.styled-checkbox.inactive + label
即可设置“非活动”复选框的不透明度。
window.addEventListener('load', function() {
let checks = document.querySelectorAll('.styled-checkbox');
checks.forEach(function(check) {
check.addEventListener('click', chkStyles);
});
function chkStyles() {
// Verify if there's at least one checkbox checked
let checked = document.querySelectorAll('.styled-checkbox:checked');
if(checked.length == 0) {
// No checked checkbox, remove all inactive
checks.forEach(function(check) { check.classList.remove('inactive'); });
} else {
// At least 1 is checked
checks.forEach(function(check) {
if(check.checked) {
check.classList.remove('inactive');
} else {
check.classList.add('inactive');
}
});
}
}
});
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox.inactive + label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>