javascript 制作一个类似单选按钮的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18879084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
making a div like radio button
提问by Crays
am wondering if its possible to make a div that behave exactly like a radio button? I'm trying to achieve this without the use of jquery which alot of people are suggesting, i checked the web and found some of it.
我想知道是否有可能制作一个与单选按钮完全一样的 div？我试图在不使用很多人建议的 jquery 的情况下实现这一点，我检查了网络并找到了其中的一些。
my previous way of doing this is by using javascript, this works for a small number
我以前这样做的方法是使用 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;
}
with an onclick event
带有 onclick 事件
onClick="Switcher(#c5e043,#241009,#241009,#241009,#241009)"
then each button clicked is switched, i can add on a check radio button function but i notice that i might need to go up to 20, which make the list really long.
然后切换每个点击的按钮，我可以添加一个检查单选按钮功能，但我注意到我可能需要增加到 20，这使得列表非常长。
am wondering if anyone out there have a simpler solution to this problem? Basically i need a div that behave like a radio button that changes bgcolor or smthg upon selected (the radio as well)
想知道是否有人对这个问题有更简单的解决方案？基本上我需要一个 div，它的行为就像一个单选按钮，在选择时改变 bgcolor 或 smthg（收音机也是如此）
回答by service-paradis
If I understand, you do want to use div instead of radio buttons to have a better control of the appearance. My suggestion, if you can, is to use real radio button:
如果我理解，您确实希望使用 div 而不是单选按钮来更好地控制外观。如果可以，我的建议是使用真正的单选按钮：
Use real radio buttons followed by a label like this:
使用真实的单选按钮后跟这样的标签：
<input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
<label class="radio" for="r1"></label>
Using CSS, hide the radio buttons:
使用 CSS，隐藏单选按钮：
.radios input[type=radio] {
display:none
}
This way, you can style the label as you want. I created a simple snippet (and a jsfiddle) that fully demonstrate how to use your radio buttons with a custom look. For the example, I used a little colored box that changed when it is checked.
这样，您可以根据需要设置标签样式。我创建了一个简单的片段（和一个 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>Hereis the jsfiddle
这是jsfiddle
回答by MattDiamant
Get rid of that html onClick, using inline javascript is bad practice. In your javascript file that you include on the page, add this function:
摆脱那个 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;
});
}
What this does, is it gets all your buttons (you've given all your buttons a class of buttonor something similar, right?) and assigns a clickevent to each of them. The clickevent goes through all your buttons and resets them to #241009, and then takes the button you clicked on (this) and sets it to #c5e043.
它的作用是获取您的所有按钮（您已经为所有按钮提供了一个类button或类似的东西，对吗？）并为click每个按钮分配一个事件。该click事件通过您的所有按钮并将它们重置为#241009，然后获取您单击的按钮 ( this) 并将其设置为 #c5e043。
This way, you don't have to create 20 different onclickfunctions, and you can add or remove buttons without changing the result. You also probably want to create an array that keeps track of which of the twenty buttons is active, or you could just test to see which color is active (but it would be better to set up an array).
这样，您不必创建 20 个不同的onclick功能，并且可以添加或删除按钮而不更改结果。您可能还想创建一个数组来跟踪二十个按钮中的哪个处于活动状态，或者您可以只测试查看哪种颜色处于活动状态（但最好设置一个数组）。
Also, and I know that Stack Overflow hates this, this is exactly the kind of thing that is made easier by a javascript library. Once you get a really good handle on pure javascript, look into a library like jQuery or other to simplify this process.
另外，我知道 Stack Overflow 讨厌这个，这正是 javascript 库使事情变得更容易的事情。一旦你对纯 javascript 有了很好的掌握，就可以查看像 jQuery 或其他这样的库来简化这个过程。
回答by paegun
To scale out the javascript solution to handle many "buttons", create a class. The class should have a field containing an array of divs. Within the class also provide a function such as setDivState(isSelected). Within the method handling the click action which must have the div which was clicked, perform a forEach on the divs setting the state of each div.
要扩展 javascript 解决方案以处理许多“按钮”，请创建一个类。该类应该有一个包含 div 数组的字段。类内还提供了一个函数，如 setDivState(isSelected)。在处理必须具有被单击的 div 的单击操作的方法中，在 div 上执行 forEach 设置每个 div 的状态。
