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

Question

我正在使用工作正常的图像单选按钮。但是，默认情况下需要选中其中一个单选按钮。但是，设置此项后，它不会像单击选择时那样显示选中图像周围的边框。

我尝试了很多不同的方法，例如通过 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> 

干杯:)

Answer 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 >= 9):

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

编辑:Demo for older versions of IE compatibility