图像单选按钮检查显示问题

时间:2014-07-23 12:13:26

标签: javascript jquery html

我正在使用工作正常的图像单选按钮。但是,默认情况下需要检查其中一个单选按钮。但是,如果设置了此选项,则不会显示选中图像周围的边框,就像单击选择时一样。

我尝试了很多不同的东西,例如通过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">&nbsp;</a> 

干杯:)

2 个答案:

答案 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">&nbsp;</a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture">&nbsp;</a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture">&nbsp;</a>

这是CSS中的主要技巧(仅适用于IE&gt; = 9):

input.hidden:checked + a {
    border:5px solid #d13a7a;
}

修改:Demo for older versions of IE compatibility