0

这是我的html

#This will be generated throught loop

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

这是我的jQuery点击事件

$('.selector').on('click', function() {
    if($(this).find('input').is(':checked')){
    #uncheck the checkbox       
    }else{
    #check the checkbox
    }
});

如何取消选中是否选中并检查是否未选中

4

3 回答 3

1

尝试

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

演示：小提琴

于 2013-11-02T02:30:54.527 回答
0

尝试这个

$('.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);
        }
    });
于 2013-11-02T02:32:52.217 回答
0

我不明白您为什么要尝试使用 JavaScript 来执行此操作。如果用户直接单击复选框，它将自动选中/取消选中自身，但是如果您在 JS 中添加代码以选中/取消选中它，这将取消默认行为，因此在您的点击处理程序中，您需要测试点击是中的其他地方.selector。

Anwyay，该.prop()方法已涵盖：

$('.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
    });
});

演示：http: //jsfiddle.net/N4crP/1/

但是，如果您的目标只是允许单击文本“测试”来单击框，则您不需要 JavaScript，因为这是<label>元素的作用：

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

正如您在此演示中看到的那样：http: //jsfiddle.net/N4crP/2/ - 单击文本“测试”或复选框将切换当前值而无需任何 JavaScript。

于 2013-11-02T02:48:26.523 回答