goTOP
March 8, 2015

[checkbox] 隱藏 顯示

| |
網頁語言 » JavaScript | 閱覽(4764) | Posted by apao at 14:30
css部分
<style type="text/css">
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>


javascript部分
<script type="text/javascript">
<!--
  function show(obj,item){
    document.getElementById(item).style.display = obj.checked?"block":"none";
  }
//-->
</script>


html部分
<input type="checkbox" onclick="show(this,'show');" />
<div id="show" style="display:none">這是顯示的內容</div>

註:show可以任意改為其他文字

展示網頁
http://goo.gl/ONVVvT
----------------------------------
單一選項做法
在head中
<script type="text/javascript">
<!--
  //show()函式需要兩個參數:obj為CheckBox元素本身;item為Div區塊的id
  function show(obj,item){
    //判斷CheckBox是否被勾選 若是則顯示區塊 反之則隱藏
    document.getElementById(item).style.display = obj.checked?"block":"none";
  }
//-->
</script>

在Body中
<input type="checkbox" onclick="show(this,'s2');" />
<div id="s2" style="display:none"></div>


-------------------------------------------
多選項同時顯示或不顯示
在head中
<script type="text/javascript">
<!--
  //items陣列用來紀錄要顯示/隱藏的區塊id
  var items = new Array("s2","s3");
  //show()函式需要一個參數:obj為CheckBox元素本身
  function show(obj){
    //一一取得items陣列中的物件 並判斷CheckBox是否被勾選 若是則顯示區塊 反之則隱藏
    for(var i=0;i<items.length;i++){
      document.getElementById(items[i]).style.display = obj.checked?"block":"none";
    }
  }
//-->
</script>

在Body中
<input type="checkbox" onclick="show(this,'s2');" />
<div id="s2" style="display:none"></div>
<input type="checkbox" onclick="show(this,'s3');" />
<div id="s3" style="display:none"></div>
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我