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

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

标签

从中，span已经有了一些基于单击它的功能，我在等式中添加了一个复选框，用于视觉辅助。我想做的是，当复选框被选中/取消选中时，我希望它触发已经存在的单击函数。这是我能做到的

我还希望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);
    }
});

---

请使用

标签

标签

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

---

请使用

标签

标签

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

---

首先使用

标签

元素将确保元素按需要链接在一起，因为如果元素不需要任何其他特殊操作，此解决方案将不需要与JavaScript或jQuery进行任何交互

避免使用

live（）

，选择

on（）

（>=v1.7）或

delegate（）

（ 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>

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

---

演示：

首先使用

标签

元素将确保元素按照需要链接在一起，因为如果元素不需要任何其他特殊操作，此解决方案将不需要与JavaScript或jQuery进行任何交互

避免使用

live（）

，选择

on（）

（>=v1.7）或

delegate（）

（ 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>

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

---

演示：

只需在复选框中添加一个

change

事件处理程序，并使用

标签而不是
span
。标签和输入绑定在一起。只需在复选框中添加一个
change
事件处理程序，并使用
标签而不是
span
。标签和输入绑定在一起。如果我希望调用标签的用法来表示标签的意图，那么答案就足够了。但是，在事件中，通过单击复选框本身而不是我仍然需要触发跨度上的单击事件的标签来选中/取消选中复选框。在识别复选框是否已选中/未选中时，单击实际复选框或span。。不用担心，尽管我已经找到了解决办法。但我只想把我的2美分放进去。如果我想调用标签的用法来表示标签的意图，那么答案就足够了。但是，在事件中，通过单击复选框本身而不是我仍然需要触发跨度上的单击事件的标签来选中/取消选中复选框。在识别复选框是否已选中/未选中时，单击实际复选框或span。。不用担心，尽管我已经找到了解决办法。但我只是想把我的2美分放进去。