Question

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

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

Click a li to check / uncheck a checkbox

Click a div to check / uncheck a checkbox

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

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和检查/取消选中复选框的功能中执行了更多操作。

Answer 1

尝试了不同的东西并提出了这个简单的解决方案：

<强> jsBin demo

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)

  }


});

Answer 2

在复选框和文本周围放置label，点击文字会激活复选框：

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

在复选框的click事件中，根据复选框的状态设置列表项的样式：

$("#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/

单击父li中的子复选框 - 与单击li中的相邻文本相同

2 个答案: