Question

我尝试搜索这个，但通常人们想用单选按钮切换“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代码中的pageload上的URL变量将单选按钮设置为向上或向下。我不知道这是否有帮助......

感谢您的帮助!!

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

所以，它确实有效：）

Answer 2

$('.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
});

Answer 3

也许这样的例子对你有好处。它使用纯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;

}

P.S。抱歉愚蠢的图标：）

如何在jQuery 1.9中使用链接切换隐藏的单选按钮？

3 个答案: