選中複選框時顯示/隱藏div

選擇單個複選框時，我想顯示/隱藏div。它目前與「全選」一起工作，但我無法讓它與單個複選框一起工作。下面是「全選」的代碼：選中複選框時顯示/隱藏div

JS：

<script language='JavaScript'> 
var checkboxcount = 1; 

function doCheckOne() { 
    if(checkboxcount == 0) { 
     with (document.messageform) { 
      for (var i=0; i < elements.length; i++) { 
       if (elements[i].type == 'checkbox') { 
        elements[i].checked = false; 
       document.getElementById('mail_delete_button').style.display = "none"; 
       } 
      } 
      checkboxcount = checkboxcount + 1; 
     } 
    } else 
    with (document.messageform) { 
     for (var i=0; i < elements.length; i++) { 
      if (elements[i].type == 'checkbox') { 
       elements[i].checked = true; 
      document.getElementById('mail_delete_button').style.display = "block"; 
      } 
     } 
    checkboxcount = checkboxcount - 1; 
    } 
} 
</script>

HTML：

<a href="javascript:void(0);" onclick="doCheckAll();this.blur();">Select all</a> 
<div id="mail_delete_button" style="display: none;"></div>

我想顯示格「mail_delete_button」當一個複選框被選中並在沒有任何檢查時隱藏它。注意：我的html /輸入字段的形式是「messageform」這是我的輸入代碼：

<input type='checkbox' name='delete_convos[]' value='{$pms[pm_loop].pmconvo_id}'>

任何幫助將不勝感激！謝謝！ :)

來源

2012-07-04 davec

請縮進代碼，它使事情更容易閱讀。 – Ryan

任何你不使用jQuery的原因？ –

@JakubKonecki：也許這是一個輕量級的項目。 – Ryan

這樣的事情？給複選框的id="chk"

<input type='checkbox' name='delete_convos[]' value='{$pms[pm_loop].pmconvo_id}' id="chk"> 

document.getElementById("chk").onclick = function() { 
    document.getElementById('mail_delete_button').style.display = this.checked ? "block" : "none"; 
}

DEMO

來源

2012-07-04 21:36:16 sachleen

謝謝@sachleen，出於某種原因我無法得到這個工作...我也嘗試添加一個「onclick」的輸入。有什麼建議麼？ – davec

（不涉及它是否適用於OP，但是）建議使用代碼：'document.getElementById（'mail_delete_button'）。style.display = this.checked？「block」：「none」;' – nnnnnn

謝謝@nnnnnn ...代碼/演示可用，但不在我的文檔中？ – davec

選中複選框時顯示/隱藏div

回答

相關問題