Javascript jquery取消选中并检查子元素的复选框，反之亦然

这是我的html

#This will be generated throught loop

<li class="selector">
    <a>
    <input type="checkbox" value="test" /> test
    </a>
</li>

如果选中，如何取消选中？如果未选中，如何取消选中

$(document).on('click', '.selector', function (e) {
    if (!$(e.target).is('input')) {
        $(this).find('input').prop('checked', function () {
            return !this.checked;
        });
    }
});

演示：

另一种方式

$(document).on('click', '.selector', function (e) {
    $(this).find('input').prop('checked', function () {
        return !this.checked;
    });
});
$(document).on('click', '.selector input', function (e) {
    e.stopPropagation();
});

演示：

试试这个

$('.selector').on('click', function() {
        var checkbox = $(this).find(':checkbox');
        if($(checkbox).is(':checked')){
             $(checkbox).prop('checked', false);     
        }else{
        #check the checkbox
             $(checkbox).prop('checked', true);
        }
    });

---

我不明白你为什么要用JavaScript做这件事。如果用户直接单击复选框，它将自动选中/取消选中自己，但是如果在JS中添加代码以选中/取消选中它，这将取消默认行为，因此在单击处理程序中，您需要测试单击是否在

选择器中的其他位置

安维，你有没有报道过：

$('.selector').on('click', function(e) {
    if (e.target.type === "checkbox") return; // do nothing if checkbox clicked directly
    $(this).find("input[type=checkbox]").prop("checked", function(i,v) {
        return !v; // set to opposite of current value
    });
});

演示：

但是，如果您的目标只是允许单击文本“test”来单击框，则不需要JavaScript，因为
元素就是这样做的：

<li class="selector">
    <label>
    <input type="checkbox" value="test" /> test
    </label>
</li>


测试


正如您在本演示中看到的：-单击文本“test”或复选框将在不使用任何JavaScript的情况下切换当前值。
侧边注释，您确定要将事件绑定到li标记而不是输入中吗？在（'change'）

上使用

，在（'click'）上不使用
您可以使用
.prop（）
，您还可以检查一下为什么需要jQuery/JS？单击复选框取消选中是标准行为，反之亦然。为什么在锚定标记中有复选框？
<li class="selector">
    <label>
    <input type="checkbox" value="test" /> test
    </label>
</li>