制作像单选按钮一样的div

Question

我想知道是否可以制作一个行为与单选按钮完全相同的div？我试图在没有使用很多人建议的jquery的情况下实现这一点,我检查了网络并找到了一些.

我之前的做法是使用javascript,这适用于少数

function Switcher(a,b,c,d,e){
    document.getElementById('button1').style.background=a;
    document.getElementById('button2').style.background=b;
    document.getElementById('button3').style.background=c;
    document.getElementById('button4').style.background=d;
    document.getElementById('button5').style.background=e;
}

与onclick事件

onClick="Switcher(#c5e043,#241009,#241009,#241009,#241009)"

然后单击每个按钮切换,我可以添加一个检查单选按钮功能,但我注意到我可能需要达到20,这使列表真的很长.

我想知道是否有人有一个更简单的解决方案来解决这个问题？基本上我需要一个div,其行为就像一个单选按钮,可以在选中时改变bgcolor或smthg(收音机也是如此)

Answer 1

如果我理解,你确实想使用div而不是单选按钮来更好地控制外观.如果可以的话,我的建议是使用真正的单选按钮:

使用真正的单选按钮,然后是这样的标签:

<input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
<label class="radio" for="r1"></label>

使用CSS,隐藏单选按钮:

.radios input[type=radio] {
    display:none
}

这样,您可以根据需要设置标签样式.我创建了一个简单的片段(和一个jsfiddle),完全演示了如何使用自定义外观的单选按钮.例如,我使用了一个在检查时发生变化的彩色小盒子.

.radios .radio {
    background-color: #c5e043;
    display: inline-block;
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.radios input[type=radio] {
    display: none;
}

.radios input[type=radio]:checked + .radio {
    background-color: #241009;
}

<div class="radios">
    <input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="radio" for="r1"></label>
    
    <input type="radio" name="rGroup" value="2" id="r2" />
    <label class="radio" for="r2"></label>
    
    <input type="radio" name="rGroup" value="3" id="r3" />
    <label class="radio" for="r3"></label>
</div>

这是jsfiddle