公司项目有遇到一个需求,需要展示单选框的样式和以往的达成统一的一致,但是要支持多选的功能,于是就有了这样的一出多改单的情况,主要是将checkbox的样式改成radio,既有多选的功能又有单选的样式。
问题:不论是单选还是多选,样式都是无法改变的,我们应该如何实现将checkbox的样式改成radio呢?
思路:我们可以改变其他的样式,比如用一个容器来代替这个checkbox模拟一个radio的样式!checkbox和radio的选中状态都可以通过checked伪类获取到对应的状态,这样实现这个需求就变得简单了。
// 真实的radio
<div class="content-wrap">
<label>
男<input type="radio" name="test1" id="test1">
<i>bibi</i>
</label>
<label>
女<input type="radio" name="test1" id="test2">
</label>
</div>
// 由checkbox改造成的radio
<div class="content-wrap">
<label>
桃子<input type="checkbox" name="boxTest1" id="boxTest1">
<i></i>
</label>
<label>
苹果<input type="checkbox" name="boxTest1" id="boxTest2">
<i></i>
</label>
<label>
香蕉<input type="checkbox" name="boxTest1" id="boxTest3">
<i></i>
</label>
</div>
<style>
.content-wrap{
display: flex;
}
label{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
padding-right: 15px;
margin-right: 15px;
box-sizing: border-box;
}
input[type='checkbox']{
display: none;
}
i{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 12px;
height: 12px;
background: #fff;
border: 1px solid #999;
border-radius: 50%;
}
input[type='checkbox']:checked + i::before{
content: '';
display: inline-block;
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
display: inline-block;
background: #005cc8;
width: 8px;
height: 8px;
border-radius: 50%;
}
input[type='checkbox']:checked + i{
border: 1px solid #005cc8;
}
input[type='radio']:checked + i{
color: red;
}
</style>
<script>
let checkBoxList = document.querySelectorAll('[name="boxTest1"]');
let checkedArr = Array(checkBoxList.length);
for(let i=0; i<checkBoxList.length; i++){
checkBoxList[i].onchange = function(){
checkedArr[i] = checkBoxList[i].checked;
// 获取到表单的值
console.log('checkedArr',checkedArr);
console.log(`checkBoxList${i}`,checkBoxList[i].checked);
}
}
</script>