Html 使用 div 作为单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32935435/
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
Use div as radio-button
提问by Tom291
How can I use a divas radio button ?
如何使用div单选按钮？
I mean that :
我的意思是 ：
- you can select a
divand then it is bordered blue - you can only select one of them
- 您可以选择一个
div，然后它是蓝色边框 - 你只能选择其中之一
采纳答案by Xahed Kamal
Yes, you can use 'div' as radio button and will work as radio button groups. But for this you'll need Javascript. I've created a script for that using JQuery. Here is the source--
是的，您可以将“div”用作单选按钮，并将用作单选按钮组。但为此，您将需要 Javascript。我已经使用 JQuery 为此创建了一个脚本。这是来源——
$('.radio-group .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
//alert(val);
$(this).parent().find('input').val(val);
});.radio-group{
position: relative;
}
.radio{
display:inline-block;
width:15px;
height: 15px;
border-radius: 100%;
background-color:lightblue;
border: 2px solid lightblue;
cursor:pointer;
margin: 2px 0;
}
.radio.selected{
border-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Select an option (You will get it's value displayed in the text input field!)</h2>
<form method="post" action="send.php">
<div class="radio-group">
<div class='radio' data-value="One"></div>1
<div class='radio' data-value="Two"></div>2
<div class='radio' data-value="Three"></div>3
<br/>
<input type="text" id="radio-value" name="radio-value" />
</div>
</form>回答by eliksir jouvence
If you want a CSS Onlysolution, this is an excellent one :
如果你想要一个只使用CSS 的解决方案，这是一个很好的解决方案：
.labl {
display : block;
width: 400px;
}
.labl > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
cursor:pointer;
border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
background-color: #ffd6bb;
border: 1px solid #ff6600;
}<label class="labl">
<input type="radio" name="radioname" value="one_value" checked="checked"/>
<div>Small</div>
</label>
<label class="labl">
<input type="radio" name="radioname" value="another" />
<div>Small</div>
</label>Inspired by this answer
受到这个答案的启发
回答by Alex
This is a simple solution.
这是一个简单的解决方案。
HTML
HTML
<div class="option first">1</div>
<div class="option second">2</div>
<div class="option third">3</div>
<div class="option fourth">4</div>
CSS
CSS
.option
{
background-color:red;
margin: 10px auto;
}
.option.active
{
border:1px solid blue;
}
Jquery
查询
$(document).ready(
function()
{
$(".option").click(
function(event)
{
$(this).addClass("active").siblings().removeClass("active");
}
);
});
