1

我尝试搜索这个，但通常人们想用单选按钮切换“div”，但是我想用链接切换隐藏的单选按钮。

我有一个像这样的单选按钮组：

<label class="radio inline hidden"><input class="radio_buttons" id="orderDirectionASC" name="orderDirection" type="radio" value="1" /> ASC</label>

<label class="radio inline hidden"><input class="radio_buttons" id="orderDirectionDESC" name="orderDirection" type="radio" value="0" /> DESC</label>

所以，为了让我的表单更漂亮，而不是让用户点击单选按钮，我想要一个向上箭头或向下箭头的图像，可以在点击时切换。像这样的东西：

<a href="##" class="directiontoggle">
<i class="icon-chevron-up"></i>
<i class="icon-chevron-down"></i>
</a>

当然，一次只会显示其中一个，因此当单选按钮切换时，这些图像也会显示。因此，如果收音机设置为 1，它会显示向上箭头，反之亦然。

哦，我还应该提到，我根据我的 ColdFusion 代码中页面加载的 URL 变量将单选按钮设置为向上或向下。我不知道这是否有帮助...

感谢您的任何帮助！！

4

3 回答 3

1

好吧，我想我明白了。这可能不是最优雅的方法，但它确实有效。欢迎提出改进建议:)

页面加载的第一个我要么隐藏向上或向下箭头，具体取决于初始选择是什么。

<cfif orderDirection eq 1>
    $('.directiontoggleDOWN').hide();
<cfelse>
    $('.directiontoggleUP').hide();
</cfif>

然后我有这个jQuery代码：

        $('.directiontoggleUP').on('click', function(e) {
            e.preventDefault();
            $("##orderDirectionDESC").prop("checked", true); 
            $('.directiontoggleUP').hide();
            $('.directiontoggleDOWN').show();
        });
        $('.directiontoggleDOWN').on('click', function(e) {
            e.preventDefault();
            $("##orderDirectionASC").prop("checked", true); 
            $('.directiontoggleDOWN').hide();
            $('.directiontoggleUP').show();
        });

我的 HTML 看起来像这样：

                <a href="##" class="directiontoggleUP">   
                    <i class="icon-chevron-up"></i>
                </a>
                <a href="##" class="directiontoggleDOWN">
                    <i class="icon-chevron-down"></i>
                </a>

所以是的，它有效:)

于 2013-04-06T14:37:53.367 回答
0 
$('.directiontoggle').on('click', function(e) {
    e.preventDefault();

    var radio  = $('#orderDirectionASC'), //radio button to toggle
        _check = radio.is(':checked');    //is it checked ?

    $('i', this).toggle(); // toggle both i elements, one should be hidden by CSS

    radio.prop('checked', !_check); // toggle radio button
});
于 2013-04-06T13:33:49.197 回答
0

也许这样的例子对你有好处。它使用纯 HTML + CSS 工作：http: //jsfiddle.net/t6kBQ/5/

HTML 如下

<div id="sites">
    <input type="radio" name="arrows" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" />ASC</label>
    <br/>
     <input type="radio" name="arrows" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" />DESC</label>
</div>

CSS如下：

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#sites label {
    display: inline-block;
    cursor: pointer;
}


#sites label:hover {
    background-color: #efefef;
}

#sites label img {
    padding: 3px;

}

ps对不起愚蠢的图标:)

于 2013-04-06T13:37:20.947 回答