2

この種のフォームコントローラーの具体的な名前はわかりませんが（存在する場合）、基本的にはそのように無線要素を変更したいと思います。

<input type="radio" name="size" value="S" id="size_S" />
  <label for="size_S">S</label>
<input type="radio" name="size" value="M" id="size_M" />
  <label for="size_M">M</label>
<input type="radio" name="size" value="L" id="size_L" />
  <label for="size_L">L</label>

...定型化されたリンクに、チェックされたものには特別なクラスがあります。たとえば、Macys.comにサイズ選択要素をリストします。

どうすればラジオをこれらの種類のボックスリンクに変えることができますか？すでにこれを行っているライブラリまたはプラグインはありますか？

DOMを変更することはできますが、JS以外のユーザーの便宜のために、要素はラジオボタンである必要があります。

4

2 に答える 2

6

標準のフォーム要素をほぼ再利用できます。jsを有効にして、ラジオボタンを非表示にし、ラベルのスタイルを設定し、イベントをバインドして/クラスclickを追加します。ラベルをクリックしても、下にあるラジオボタンが選択されます。activeselected

jsFiddleの例：http：//jsfiddle.net/Y6BzY/

JS

$('input[type="radio"], label').addClass('js');

$('label').on('click', function() {
    $('label').removeClass('active');
    $(this).addClass('active');
});

CSS

input[type="radio"].js {
    display: none;
}

label.js {
    display: block;
    float: left;
    margin-right: 5px;
    border: 1px solid black;
    padding: 4px;
    cursor: pointer;
}

label.js.active {
    border: 1px solid blue;
    color: blue;
}
于 2012-05-28T02:14:08.197 に答える
1

エフラム、

私はあなたが提供したリンクにアクセスしました、そして私が見ることができるすべてはサイズ選択のためにそれらの中に番号が付いているスパンがあります。あなたはそれらを意味しましたか、それともそれらが好きですか？

あなたの質問について：ボックスの代わりにリンクを表示する理由は、jsサポートがないためだと理解しています。あなたの例のように、noscriptタグの外側に、ハードコードされたラジオボタンとスパンを持つタグを使用することを検討しましたか？

いずれにせよ、これが正直であるためにDOMを操作する必要性は実際にはわかりません。

于 2012-05-28T01:22:53.397 に答える