Question

我正在通过复选框创建一个下拉列表。如果选中复选框，则下拉列表会显示并消失... 我想制作一个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

您可以先在click事件中找到该元素，然后相应地编写逻辑。

$(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

上添加事件列表

Answer 3

使用标签。标签充当其相关控件的大型可点击区域。

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

3 个答案: