0

次のマークアップと Javascript があります。

JSFiddle

HTML:

<form method="get" action="some-url-here">
 <div class="UserFilter">
  <ul class="UserFilter">
   <li>
      <label class="Selected" for="1">
          <input id="1" type="radio" value="1" name="Profile" />
          <img title="User 1" alt="User 1" src="img-url-here" style="width: 50px;height: 50px" />
          User 1
      </label>
   </li>
   <li>
      <label class="Selected" for="2">
          <input id="2" type="radio" value="2" name="Profile" />
          <img title="User 2" alt="User 2" src="img-url-here" style="width: 50px;height: 50px" />
          User 2
      </label>
   </li>
  </ul>
 </div>
</form>

JavaScript:

var labelID;
$("label img").live("click", function() {
        labelID = $(this).parent().attr('for');
        $('#'+labelID).trigger('click');        
});

$('ul.UserFilter input').click(function () {
        $('ul.UserFilter input:not(:checked)').parent().removeClass("Selected");
        $('ul.UserFilter input:checked').parent().addClass("Selected");
        //$(this).closest("form").submit();     
});

$('input:checked').parent().addClass("Selected");

CSS:

div.UserFilter {
    background: none repeat scroll 0 0 #EAE5DA;
    border-bottom: 1px solid #F1EEE6;
    border-top: 3px solid #0888A5;
    box-shadow: 0 5px 10px #F1F1F1;
}
div.UserFilter ul {
    display: inline-block;
}
ol, ul {
    list-style: none outside none;
}
div.UserFilter ul li label.Selected {
    background: none repeat scroll 0 0 #0888A5;
    border: 1px solid #16758B;
    color: #FFFFFF;
    text-shadow: 0 1px 0 #16758B;
}
div.UserFilter ul li label.Selected {
    background: none repeat scroll 0 0 #688ABD;
    border: 1px solid #688ABD;
    color: #FFFFFF;
    cursor: pointer;
    text-shadow: 0 1px 0 #52688A;
    transition: border-color 0.218s ease 0s;
}
div.UserFilter ul li label {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 2px 2px 2px 2px;
    display: inline-block;
    letter-spacing: normal;
    padding: 0 5.666px 0 0;
    transition: background 0.218s ease 0s;
    word-spacing: normal;
}

テキストをクリックすると、それに関連付けられたラジオ ボタンを選択するのに問題なく動作します (Firefox、Chrome、および IE9+ でテスト済み)。ただし、IE8 以降では、画像をクリックしても、ラジオ ボタンのクリック イベントが選択または発生しません。アイデア、回避策、提案は大歓迎です。

4

1 に答える 1

2

背景画像を使用するブラッドのソリューションが好きです。<span>このようにして、JavaScript を使用しなくても問題を解決できます。

HTML コードは次のようになります。

<form method="get" action="some-url-here">
 <div class="UserFilter">
  <ul class="UserFilter">
   <li>
      <label class="Selected" for="1">
          <input id="1" type="radio" value="1" name="Profile" />
          <span title="User 1" style="background-image: url('img-url-here')width: 50px;height: 50px;display: inline-block;"></span>
          User 1
      </label>
   </li>
   <li>
      <label class="Selected" for="2">
          <input id="2" type="radio" value="2" name="Profile" />
          <span title="User 2" style="background-image: url('img-url-here')width: 50px;height: 50px;display: inline-block;"></span>
          User 2
      </label>
   </li>
  </ul>
 </div>
</form>

JavaScript ははるかに小さくなります。HTML コードでクラスをラベルに$('input:checked').parent().addClass("Selected");設定しているため、この行を削除することもできます。Selected

$('ul.UserFilter input').click(function () {
        $('ul.UserFilter input:not(:checked)').parent().removeClass("Selected");
        $('ul.UserFilter input:checked').parent().addClass("Selected");
        //$(this).closest("form").submit();     
});

div.UserFilter ul li label.Selectedセレクターの 1 つを削除できることを除いて、CSS は同じままです。

更新された jsFiddle: http://jsfiddle.net/ft4Hb/1/

于 2013-02-20T20:16:57.463 に答える