jQuery复选框和span共享一个单击事件

jQuery checkbox and span that share a click event

本文关键字：一个 单击 事件 复选框 span 共享 jQuery      更新时间：2024-04-09

所以我有一个复选框和一个span

<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);
    }
});

请使用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/

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

避免使用live()，选择使用on()（>=v1.7）或delegate()（<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/

相关文章：