jquery - 隐藏输入类型单选按钮并显示标签时，如何使用箭头键在单选按钮之间导航？

Question

我有一个单选按钮组，单选按钮在显示相关标签时隐藏。比方说 单选按钮组称为颜色。选择某种颜色后，我会突出显示具有该颜色的标签。当我单击所有标签时，这非常有用。但我也想使用箭头键在标签之间导航。我意识到由于输入是隐藏的，所以箭头移动没有生效。但是有什么办法可以解决这个问题吗？

HTML:

<div>
    <input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label><br>
    <input type="radio" name="color" value="red" id="red"><label for="red">Red</label><br>
    <input type="radio" name="color" value="green" id="green"><label for="green">Green</label><br>
    <input type="hidden" value="" id="color_selected"/>
</div>

CSS:

input {
    display: none;
}

JS:

$(document).ready(function() {
    $('input[name="color"]').change(function() {
        var prevColor = $('#color_selected').val();
        if (prevColor) {
            $('#' + prevColor).next('label').css({'background':'#FFFFFF'});
        }
        var color = jQuery(this).val();
        $(this).next('label').css({'background':color});
        $('#color_selected').val(color);
    });
});

http://jsfiddle.net/nkqLj/

感谢您的宝贵时间。

Answer 1

代替 display:none，通过将输入字段放置在远处来模拟隐藏。

input {
    left: -1000px;
    position: absolute;
}

JSFIDDLE DEMO