-4

jQueryを使用して各ラジオボタンに独自の背景画像を与えることは可能でしょうか? つまり、次のとおりです。

サンプル画像

<form id="tiepspiel" name="tiepspiel" action="#" method="POST">
        <ul id="sortable">
        <?php
        $count = 5;
        $i = 1;
        while ($i <= $count) {
            echo '<li><ul class="elements">
        <li class="selectable">
            <label class="stein"><input type="radio" name="selected__'.$i.'" value="stein</label>
            <span></span>
        </li>
        <li class="selectable">
            <label class="schere"><input type="radio" name="selected_'.$i.'" value="schere"></label>
            <span></span>
        </li>
        <li class="selectable">
            <label class="papier"><input type="radio" name="selected_'.$i.'" value="papier"></label>
            <span></span>
        </li>
    </ul>
                    </li>';
            $i++;
        }
        ?>
        <hr>
        <button>Submit</button>
        </ul>
        </form>

各クラスにCSSを追加しようとしています。例えば：

.papier {
    background-image: url("../images/papier_blue.png");
    width: 82px;
    height: 82px;
    cursor: pointer;
    margin-right: 50px;
}
4

3 に答える 3

1

背景画像は、ラジオ ボタン自体ではうまく機能しません。できることは<label>、次のようにそれぞれを a でラップすることです。

<ul class="elements">
    <li class="selectable">
        <label class="stein"><input type="radio" name="stein" value="stein"></label>
        <span></span>
    </li>
    <li class="selectable">
        <label class="schere"><input type="radio" name="schere" value="schere"></label>
        <span></span>
    </li>
    <li class="selectable">
        <label class="papier"><input type="radio" name="papier" value="papier"></label>
        <span></span>
    </li>
</ul>

その後、CSS はそのまま機能するはずです。

于 2012-11-25T15:42:32.903 に答える
0

間違ったクラスに背景スタイルを配置しました。.selectableそれらをクラス定義に入れてください。

于 2012-11-25T15:23:58.927 に答える
0

一種の「偽のラジオボタン」が必要だと思います。これには、jquery を含む多くの方法がありますが、css を使用して簡単に行うこともできます。誰かが言ったように、ラジオボタンをspanまたはでラップする必要がありますlabel。デフォルトでは、これらは 'div' のような 'block' 要素ではないため、属性 ( display:block; または display:inline-block; ) を指定しない限り、結果を取得できません。また、幅と高さを設定することを忘れないでください（つまり、スパン/ラベルを意味します）、ラジオボタンに不透明度0を設定します。http://ajaxian.com/archives/custom-css-inputsを見ることをお勧めします。または、http://www.iamntz.com/625/frontend-developer/formulare- の中を見ることもできます。 custom-checkbox-radio-v-2/ (ルーマニア語であっても構いません。

ロケット科学はありません。いくつかのことを処理するだけで済みます。

于 2012-11-25T20:35:06.820 に答える