单击外部时如何取消选中复选框？

Question

我通过创建一个复选框来创建一个水滴列表。如果复选框被选中，则会出现和消失droplist ...我想做一个javascript代码，当用户在外面的空白区域中单击时，取消选中该复选框。

我已经尝试过这个javascript：

<script language="javascript">
    document.getElementById("drop1").checked = true;
    document.getElementById("drop1").checked = false;
</script>

但它不起作用。

下面是输入表单：

<input type="checkbox" checked="" id="drop1" />

在进阶时谢谢！

Answer 1

当用户在下拉列表之外单击时，使用下面的js代码隐藏。

包括jquery并添加以下代码

$(document).mouseup(function (e)
{
    var container = $("selector to dropdown list");

    if (!container.is(e.target) // if clicked outside
        && container.has(e.target).length === 0)nor a descendant of the container
    {
        container.hide();
        $( "#drop1" ).prop( "checked", false ); //to uncheck
    }
});

Answer 2

您可以首先找到单击事件上的元素，然后可以相应地编写逻辑。

$(document).click(function(e) {
    var x = e.clientX, y = e.clientY,
    elementOnClick = document.elementFromPoint(x, y);
    var z = elementOnClick.id;
    if(z!="drop1" && !z.is(":visible"))
    {
       document.getElementById("drop1").checked = false;
    }
});

如果你纯粹想用javascript来做这件事，那么你可以在文档http://www.javascripter.net/faq/addeventlistenerattachevent.htm上使用addEventListener

Answer 3

使用标签。标签充当与其关联的控件的一个大的可单击区域。