使一个div像单选按钮 [英] making a div like radio button

问题描述

我想知道是否可能使一个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，这使列表真的很长。 p>

我想知道是否有人有一个更简单的解决方案这个问题？基本上我需要一个div，它的行为像一个单选按钮，改变bgcolor或smthg时选择（收音机）

解决方案

你确实想使用div而不是单选按钮来更好地控制查找。
如果你真的可以使用真正的单选按钮，这是我的建议：

使用真正的单选按钮与这样的标签：

 < input type =radioname =rGroupvalue =1id =r1checked =checked/& 
< label class =radiofor =r1>< / label> 
  

通过css隐藏您的单选按钮：

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

并根据需要设置标签样式。我创建了一个简单的jsfiddle，完全演示如何使用您的单选按钮，而没有默认外观。

这里是jsfiddle

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.

my previous way of doing this is by using javascript, this works for a small number

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="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.

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)

解决方案

If you do want to use div instead of radio buttons to have a better control of the looking. If you can actually use real radio button, this is what i suggest:

Use real radio buttons with a label like this:

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

Hide by css your radio buttons:

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

And style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use your radio buttons without having the default look. Instead, it is jut a little colored square that changed when it is checked.

Here is the jsfiddle

这篇关于使一个div像单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！