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 つだけなので、ラジオ ボタンが切り替わると、それらの画像も切り替わります。したがって、ラジオが 1 に設定されている場合、上向きの矢印が表示され、逆の場合も同様です。

ああ、また、ColdFusion コードのページロードの URL 変数に基づいて、ラジオ ボタンを上または下に設定したことにも言及する必要があります。それが役立つかどうかはわかりません...

助けてくれてありがとう!!

4

3 に答える 3

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 に答える
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 に答える