Question

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

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

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

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

看起来的障碍是当我在脚本中有两个逻辑时，一个将总是X出另一个，留下一个工作而另一个不工作。所以我想弄清楚如何让这项工作和谐相处，我显然当时正在思考问题并需要一些帮助。

这是我正在尝试使用的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/

你仍然想要它的风格然后请参考这个小提琴。

$('.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/

Answer 2

首先使用label元素将确保您的元素根据需要链接在一起，因为如果元素不需要任何其他特殊操作，此解决方案将不需要与JavaScript或jQuery进行任何交互。

避免使用live()并选择加入on()（＆gt; = v1.7）或delegate()（＆lt; v1.7）。

<强> HTML：

<input type="checkbox" class="checker" id="check1"> <label for="check1">Label 1</label>
<input type="checkbox" class="checker" id="check2"> <label for="check2">Label 2</label>
<input type="checkbox" class="checker" id="check3"> <label for="check3">Label 3</label>
<input type="checkbox" class="checker" id="check4"> <label for="check4">Label 4</label>

<强> jQuery的：

$('.checker').each(function(){
    $(this).on('change', function(){
        $('.checker').not('#' + this.id).attr('checked', false);
    });
});

演示：http://jsfiddle.net/EWK4M/

共享点击事件的jQuery复选框和范围

2 个答案: