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>

Here是jsfiddle

Answer 2

摆脱那个html onClick，使用内联javascript是不好的做法。在页面中包含的javascript文件中，添加以下函数：

var checkboxes = document.querySelectorAll('.button');
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function() {
        for (var j = 0; j < checkboxes.length; j++) {
            checkboxes[j].style.background = '#241009';
        }
        this.style.background = '#c5e043';
        return false;
    });
}

这是做什么的，它是否会获得所有按钮（您已经为所有按钮提供了button类似的东西，对吧？）并为每个按钮分配click个事件。 click事件会遍历您的所有按钮并将其重置为＃241009，然后点击您点击的按钮（this）并将其设置为＃c5e043。

这样，您不必创建20个不同的onclick函数，并且可以在不更改结果的情况下添加或删除按钮。您可能还想创建一个数组来跟踪20个按钮中的哪个是活动的，或者您可以只测试看哪个颜色是活动的（但最好设置一个数组）。

另外，我知道Stack Overflow讨厌这个，这正是javascript库变得更容易的事情。一旦你对纯javascript有了很好的处理，可以查看像jQuery这样的库，以简化这个过程。

Answer 3

要扩展javascript解决方案以处理许多“按钮”，请创建一个类。该类应该有一个包含div数组的字段。在类中还提供了诸如setDivState（isSelected）之类的函数。在处理必须具有被单击的div的单击操作的方法中，在div上执行forEach设置每个div的状态。

制作像单选按钮一样的div

3 个答案: