2

这一定很简单（而且可能是一个骗局），但我现在没有看到它，我一直在寻找！

我阅读（并尝试）的不仅仅是这些解决我的问题的方法：

单击 li 以选中/取消选中复选框

单击一个 div 以选中/取消选中一个复选框

...但是对于我的生活，我似乎无法在这个小提琴中获得复选框：

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

也不是这个受 SO 启发的衍生物：

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

...按照我的要求行事：

我需要单击 a 中的文本<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 回答