0

所以我有一个复选框和一个跨度

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

2 回答 2

5

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

于 2012-07-26T18:22:06.847 回答
0

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

于 2012-07-26T18:45:01.650 回答