javascript - 共享单击事件的 jQuery 复选框和跨度

Question

所以我有一个复选框和一个范围

<input type="checkbox" class="checker"> <span class="something">Label</span>

跨度已经具有一些基于单击的功能，我将在方程式中添加一个复选框以提供视觉辅助。我想做的是，当选中/取消选中复选框时，我希望它触发跨度已经存在的单击功能。这是我能做到的。

我还希望在跨度上使用相同的单击功能来选中/取消选中它旁边的复选框，同时继续其基本功能。我也能做到这一点。

问题似乎是，当我在脚本中同时拥有两种逻辑时，其中一个总是会排除另一个，导致一个有效而另一个无效。因此，我试图弄清楚如何使这项工作协调一致，显然我当时在跳出框框思考时遇到了问题，需要一些帮助才能实现这一目标。

这是我当前尝试使用的 JS

$('.checker').live('click', function(e){e.preventDefault();$(this).siblings('.something').trigger('click');});
$('.something').live('click', function(e)
{
    e.preventDefault();
    if($(this).siblings('.checker').is(':checked'))
    {
        $(this).siblings('.checker').attr('checked', false);
    }
    else
    {
        $(this).siblings('.checker').attr('checked', true);
    }
});

Answer 1

请使用Label标签

<li class="contact">
    <input id='input1' type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <label for='input1'>Baby James</label>
</li>

http://jsfiddle.net/xgB5X/5/

您仍然希望它符合您的风格，请引用此 fiddle 。

$('.something').on('click', function() {
    var chk_box = $(this).prev();
    var chk_status = !(chk_box.is(':checked'));
    chk_box.attr('checked', chk_status);
});

http://jsfiddle.net/xgB5X/10/