我正在使用工作正常的图像单选按钮。但是,默认情况下需要检查其中一个单选按钮。但是,如果设置了此选项,则不会显示选中图像周围的边框,就像单击选择时一样。
我尝试了很多不同的东西,例如通过html和javascript onload
检查无效。
(注意只有一个单选按钮可供选择,这是因为目前没有第二个选项,但在不久的将来会有我们预先检查的原因)
有什么想法吗?
<script type="text/javascript">
$(document).ready(function() {
$("a.radio-color-picture").click(function(){
var $id = $(this).attr('id');
$("a.radio-color-picture").removeClass('radio-color-border');
$("a#" + $id).addClass('radio-color-border');
});
});
function set_radio($inputid) {
$("input#" + $inputid).click();
}
</script>
<style type="text/css">
a.radio-color-picture {
border: 2px solid transparent;
display: inline-block;
height: 160px;
margin-right: 10px;
text-decoration: none;
width: 160px;
}
a.radio-color-picture:hover {
border:2px solid #d13a7a;
}
a.radio-color-border {
border:5px solid #d13a7a;
}
a#color {
background: url("<?php echo get_bloginfo('wpurl');?>/wp-content/themes/Impreza/_customimages/thumbnail.jpg") no-repeat scroll 0 0 white;
}
.hidden {
left: -10000px;
position: absolute;
top: -1000px;
}
</style>
<input type="radio" value="CHAR" name="color" id="color" class="hidden" checked="checked" />
<a id="color" href="javascript:set_radio('color');" class="radio-color-picture"> </a>
干杯:)
答案 0 :(得分:1)
要将css显示为默认选中,您必须添加css&#39;类&#39;或者&#39; id&#39;默认情况下,预先选中的单选按钮及其各自的href标签。
答案 1 :(得分:1)
这实际上可以更简单地完成:
<强> Demo 强>
Javascript:
$(document).ready(function(){
$('a.radio-color-picture').click(function(){
$(this).prev('input.hidden').click();
return false;
});
});
HTML(确保使用唯一的ID!)
<input type="radio" value="CHAR" name="color" id="color" class="hidden" />
<a data-idinput="color" id="link" class="radio-color-picture"> </a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture"> </a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture"> </a>
这是CSS中的主要技巧(仅适用于IE&gt; = 9):
input.hidden:checked + a {
border:5px solid #d13a7a;
}