2

これは非常に単純に違いありません (そしておそらくだまされています) が、私は今それを見ていません。

私は自分の問題に対するこれらのアプローチ以上のものを読みました（そして試みました）：

クリックしてチェックボックスをオン/オフします

div をクリックして、チェックボックスをオン/オフにします

...しかし、私の人生では、このフィドルでチェックボックスを取得できないようです:

http://jsfiddle.net/purushagovinda/7wZcS/8/

このSOにインスパイアされた派生物もありません：

http://jsfiddle.net/purushagovinda/ysKLE/3/

...私の要件に従って動作するには：

のテキストをクリックする<li>と、トグルが起動し、そのテキストがハイライト/ハイライト解除され、対応するチェックボックスがチェック/チェック解除される必要があります。チェックボックス自体をクリックすると、ユーザーがチェックボックスではなく隣接するテキストをクリックした場合とまったく同じように動作する必要があります。

チェックボックスをクリックしても何も起こらないようになりました。
これらの行の順列と組み合わせで（最初のフィドルで）遊んでみました：

if (target.is('input:checkbox')) return;

&

   //e.preventDefault();
   //e.stopPropagation();

..しかし、役に立たない。

誰かが私に何かガイダンスを持っているなら、私はそれを感謝します.

- -編集： - -

font-weightチェックボックスを切り替えてチェック/チェックを外すだけの関数内でさらに多くのことを行っているため、トグル関数が必要であることを言及する必要がありました。

4

2 に答える 2

3

さまざまなことを試して、この簡単な解決策を思いつきました：

jsBin デモ

CSS:

#products_furniture_finishes_options span{
  padding-left:28px;
  margin-left:-28px;  /* now cover the checkbox :) */
}

jQuery:

$("#products_furniture_finishes_options > li").click(function(){

  var isChecked = $(this).find('input').is(':checked'); // returns a BOOLEAN value

  $(this).find('span').css({fontWeight: isChecked ? '400' : '700' });
  $(this).find('input').prop('checked', !isChecked);

  if( isChecked ){

       // do WOW stuff here (if checkbox was already checked)

  }else{

       // do other COOL stuff (if checkbox was OFF)

  }


});
于 2012-12-08T03:27:03.140 に答える
2

チェックlabelボックスとテキストを囲むと、テキストをクリックするとチェックボックスがアクティブになります。

<label>
  <input type="checkbox" title="Mesh Back" name="products_furniture_finishes" value="13548454609475">
  <span>Mesh Back</span>
</label>

チェックボックスのクリック イベントで、チェックボックスの状態に応じてリスト項目のスタイルを設定します。

$("#products_furniture_finishes_options :checkbox").click(function(e) {
  var checked = $(this).is(':checked');
  var li = $(this).closest('li');
  li.css("font-weight", checked ? "700" : "400");
});

デモ: http://jsfiddle.net/Guffa/7wZcS/9/

于 2012-12-08T03:33:58.860 に答える