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

我正在通过创建一个复选框来创建一个下拉列表。如果复选框被选中，则下拉列表出现并消失... 我想创建一个JavaScript代码来取消选中该复选框，当用户在空白区域中单击外部时。如何在外部点击时取消选中复选框？

我已经试过此javascript：

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

但它无法正常工作。

这里的输入形式：

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

在先进的感谢！

来源

2014-02-22 Hossam Din

您必须在元素和足够大的父元素上创建点击事件侦听器;我应该警告你，这不是直观的设计。 –

使用下面的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 
    } 
});

来源

2014-02-22 09:30:38

如果jQuery标签不存在，那么预计答案将是纯JavaScript。查看JavaScript标记wiki。 –

坦率地说，我不是很好的JavaScript和Jquery ...所以你可以给我一个代码来实现，让我明白它是我自己的逻辑...对于那个 –

抱歉，包括一个库小5行代码。 – KarelG

你可以先找到点击事件的元素，然后可以编写相应的逻辑。

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

来源

2014-02-22 09:42:42

使用标签的addEventListener。标签充当其关联控件的大量可点击区域。

来源

2014-02-22 10:16:08

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

回答

相关问题