Question

我想知道当我点击页面中的任何位置时如何取消选中所有选中的复选框。

HTML：

<input type="checkbox" name="mychecked[]"/>
<input type="checkbox" name="mychecked[]"/>
<input type="checkbox" name="mychecked[]"/>
<input type="checkbox" name="mychecked[]"/>

<div id="count"></div>

JS：

$('input[type="checkbox"]').on('change', function() {
    var msg = "checked " +$('input[type="checkbox"]:checked').length +" items";
    $('#count').html(msg);
});

这是一个示例小提琴：http://jsfiddle.net/xa9xzL4a/15/

Answer 1

试

$('input[type="checkbox"]').on('click', function (e) {
    e.stopPropagation();
    var msg = "checked " + $('input[type="checkbox"]:checked').length + " items";
    $('#count').html(msg);
});

$(document).click(function () {
    $('input[type="checkbox"]').prop("checked", false);
});

DEMO

或使用 is()

$(document).click(function (e) {

    if (!$(e.target).is($('input[type="checkbox"]'))) {
        $('input[type="checkbox"]').prop("checked", false);
    } else {
        var msg = "checked " + $('input[type="checkbox"]:checked').length + " items";
        $('#count').html(msg);

    }
});

Answer 2

尝试此操作：为文档添加点击事件，如果点击的元素不是复选框，则清除所有复选框

$('input[type="checkbox"]').on('change', function() {
    var msg = "checked " +$('input[type="checkbox"]:checked').length +" items";
    $('#count').html(msg);
});
$(document).on('click',function(e){
  //check if clicked element is not checkbox
 if(e.target.type!="checkbox")
 {
    $('input[type="checkbox"]').attr('checked',false); 
    $('#count').html("");
 }
});

<强> Demo

如果使用jQuery从网页中的任何位置单击，则取消选中复选框

2 个答案:

DEMO