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

要将css显示为默认选中，您必须添加css＆＃39;类＆＃39;或者＆＃39; id＆＃39;默认情况下，预先选中的单选按钮及其各自的href标签。

Answer 2

这实际上可以更简单地完成：

<强> 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

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

2 个答案: