如果我有一个带有按钮的无线电组:
... 如何在选择选项中只显示图像而不是按钮?
如果我有一个带有按钮的无线电组:
... 如何在选择选项中只显示图像而不是按钮?
当前回答
这对我来说很管用:
输入(type =“广播”){ margin-right: 1 em; 外观:无; 宽:12 px; 高度:12 px; 背景图片:url(“checkbox_off.gif”); } 检查输入(type =“广播”):{ 背景图片:url(“checkbox_on.gif”); }
其他回答
你可以使用CSS。
HTML(仅供演示,可自定义)
<div class="button">
<input type="radio" name="a" value="a" id="a" />
<label for="a">a</label>
</div>
<div class="button">
<input type="radio" name="a" value="b" id="b" />
<label for="b">b</label>
</div>
<div class="button">
<input type="radio" name="a" value="c" id="c" />
<label for="c">c</label>
</div>
...
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
border: 1px solid red;
}
js小提琴
这里有一个非常简单的例子
input[type="radio"]{ display:none; } input[type="radio"] + label { background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png); background-size: 100px 100px; height: 100px; width: 100px; display:inline-block; padding: 0 0 0 0px; cursor:pointer; } input[type="radio"]:checked + label { background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png); } <div> <input type="radio" id="shipadd1" value=1 name="address" /> <label for="shipadd1"></label> value 1 </div> <div> <input type="radio" id="shipadd2" value=2 name="address" /> <label for="shipadd2"></label> value 2 </div>
演示:http://jsfiddle.net/La8wQ/2471/
这个例子基于这个技巧:https://css-tricks.com/the-checkbox-hack/
我在chrome、firefox和safari浏览器上进行了测试
保持单选按钮隐藏,在点击图像时,使用JavaScript选择它们,并设置图像的样式,使其看起来像选中的。这是加价
<div id="radio-button-wrapper">
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
</div>
和 JS
$(".image-radio img").click(function(){
$(this).prev().attr('checked',true);
})
CSS
span.image-radio input[type="radio"]:checked + img{
border:1px solid red;
}
这对我来说很管用:
输入(type =“广播”){ margin-right: 1 em; 外观:无; 宽:12 px; 高度:12 px; 背景图片:url(“checkbox_off.gif”); } 检查输入(type =“广播”):{ 背景图片:url(“checkbox_on.gif”); }
下面是一个基于示例的简单jQuery UI解决方案:
http://jqueryui.com/button/#radio
修改代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
<input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
</div>
</form>
</body>
</html>
jQueryUI负责图像背景,这样您就知道选中了哪个按钮。
注意:如果你想通过Javascript将按钮设置为选中或未选中,你必须调用refresh函数:
$('#radio3').prop('checked', true).button("refresh");