0

次のような順序付けられていないリストがあります。

  <ul class="list-one">
    <li><a href="#">Hip Hop</a></li>
    <li><a href="#">Country</a></li>
    <li><a href="#">Pop</a></li>
    <li class="selected"><a href="#">Religious</a></li>
  </ul>


アンカーをチェックボックスのように動作させたい。別の同様のリストがあり、そこにあるチェックボックスをラジオ ボタンのように動作させたいと考えています。

jqueryを使用してこれを行う方法はありますか? Googleで検索しましたが、実際には何も見つかりませんでした。

4

4 に答える 4

4

jQueryparent()とsiblings()メソッドを操作できます。

ラジオについては、このjsFiddle Demo をチェックしてください。

jQuery ラジオ:

$(".list-one a").click(function(){
  $(this).parent().addClass("selected").siblings().removeClass("selected"); 
});

jQuery チェックボックス:

$(".list-one a").click(function(){
  $(this).parent().toggleClass('selected'); 
});

フォームに無線が必要な場合labelは、タグの代わりに使用aして、css で無線を非表示にすることができます。

ラジオについては、このjsFiddle Demo をチェックしてください。

HTML ラジオ:

<ul class="list-one">
  <li>
    <input id="input-1" type="radio" name="list" value="Hip Hop" />
    <label for="input-1">Hip Hop</label>
  </li>
  <li>
    <input id="input-2" type="radio" name="list" value="Country" />
    <label for="input-2">Country</label>
  </li>
  <li>
    <input id="input-3" type="radio" name="list" value="Pop" />
    <label for="input-3">Pop</label>
  </li>
  <li class="selected">
    <input id="input-4" type="radio" name="list" value="Pop" />
    <label for="input-4">Religious</label>
  </li>
</ul>

typeチェックボックスの属性をに変更することを忘れないでくださいcheckbox。

jQueryラジオ：

$(".list-one label").click(function(){
  $(this).parent().addClass("selected").siblings().removeClass("selected"); 
});

jQuery チェックボックス:

$(".list-one label").click(function(){
  $(this).parent().toggleClass('selected'); 
});

CSS :

.list-one label { cursor: pointer; }
.list-one input { display: none; }
于 2013-08-07T14:21:12.123 に答える
3

チェックボックスの場合は、次のようにします。

$(".list-one > li > a").click(function() {
    $(this).closest('li').toggleClass('selected');
    return false;
});

または委任を使用して:

$(".list-one").on("click", "> li > a", function() {
    $(this).closest('li').toggleClass('selected');
    return false;
});

ラジオ ボタンの場合は、兄弟からクラスを切り替えて削除するのではなく追加します。

$(".list-one > li > a").click(function() {
    $(this).closest('li').addClass('selected').siblings().removeClass('selected');
    return false;
});

または委任を使用して:

$(".list-one").on("click", "> li > a", function() {
    $(this).closest('li').addClass('selected').siblings().removeClass('selected');
    return false;
});

さらに探索する:

とはいえ、特にモバイル デバイス (タブレット、電話など) のサポートに関しては、実際のチェックボックスとラジオ ボタンを使用する方が良い方法であることがよくあります。要素を使用labelしてクリックしやすくし、完全にスタイルを設定できますが、それらを実際のチェックボックス/ラジオ ボタンにすることで、ユーザー エージェント (ブラウザー) に情報を提供し、独自のロールによって失われます。

于 2013-08-07T14:21:03.117 に答える
0

チェックボックスはそのように使用するように設計されており、ラジオ ボタンは後者で使用するように設計されています。要素をテーマにしたい場合は、実際のチェックボックスとラジオボタンをきれいなバージョンに置き換えることができる jQuery プラグインがありますhttp://stefangabos.ro/jquery/zebra-transform/を参照してください

于 2013-08-07T14:21:09.587 に答える