如何在外部點擊時取消選中複選框？

我正在通過創建一個複選框來創建一個下拉列表。如果複選框被選中，則下拉列表出現並消失... 我想創建一個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

如何在外部點擊時取消選中複選框？

回答

相關問題