<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[A.PAO designSTUDIO BLOG]]></title> 
<link>https://blog.apao.idv.tw/index.php</link> 
<description><![CDATA[A.PAO designSTUDIO 阿保工作室]]></description> 
<language>zh-tw</language> 
<copyright><![CDATA[A.PAO designSTUDIO BLOG]]></copyright>
<item>
<link>https://blog.apao.idv.tw/post//</link>
<title><![CDATA[[checkbox] 隱藏 顯示]]></title> 
<author>apao &lt;apao@www.apao.idv.tw&gt;</author>
<category><![CDATA[JavaScript]]></category>
<pubDate>Sun, 08 Mar 2015 06:30:34 +0000</pubDate> 
<guid>https://blog.apao.idv.tw/post//</guid> 
<description>
<![CDATA[ 
	css部分<div class="code">&lt;style type=&quot;text/css&quot;&gt;<br/>div#show&#123; margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;&#125;<br/>&lt;/style&gt;</div><br/><br/>javascript部分<div class="code">&lt;script type=&quot;text/javascript&quot;&gt;<br/>&lt;!--<br/>&nbsp;&nbsp;function show(obj,item)&#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(item).style.display = obj.checked?&quot;block&quot;:&quot;none&quot;;<br/>&nbsp;&nbsp;&#125;<br/>//--&gt;<br/>&lt;/script&gt;</div><br/><br/>html部分<div class="code">&lt;input type=&quot;checkbox&quot; onclick=&quot;show(this,&#039;show&#039;);&quot; /&gt;<br/>&lt;div id=&quot;show&quot; style=&quot;display:none&quot;&gt;這是顯示的內容&lt;/div&gt;</div><br/>註：show可以任意改為其他文字<br/><br/><a href="http://goo.gl/ONVVvT" target="_blank">展示網頁</a><br/><a href="http://goo.gl/ONVVvT" target="_blank">http://goo.gl/ONVVvT</a><br/>----------------------------------<br/>單一選項做法<br/>在head中<br/><div class="code">&lt;script type=&quot;text/javascript&quot;&gt;<br/>&lt;!--<br/>&nbsp;&nbsp;//show()函式需要兩個參數：obj為CheckBox元素本身；item為Div區塊的id<br/>&nbsp;&nbsp;function show(obj,item)&#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;//判斷CheckBox是否被勾選 若是則顯示區塊 反之則隱藏<br/>&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(item).style.display = obj.checked?&quot;block&quot;:&quot;none&quot;;<br/>&nbsp;&nbsp;&#125;<br/>//--&gt;<br/>&lt;/script&gt;</div><br/>在Body中<br/><div class="code">&lt;input type=&quot;checkbox&quot; onclick=&quot;show(this,&#039;s2&#039;);&quot; /&gt;<br/>&lt;div id=&quot;s2&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;</div><br/><br/>-------------------------------------------<br/>多選項同時顯示或不顯示<br/>在head中<br/><div class="code">&lt;script type=&quot;text/javascript&quot;&gt;<br/>&lt;!--<br/>&nbsp;&nbsp;//items陣列用來紀錄要顯示/隱藏的區塊id<br/>&nbsp;&nbsp;var items = new Array(&quot;s2&quot;,&quot;s3&quot;);<br/>&nbsp;&nbsp;//show()函式需要一個參數：obj為CheckBox元素本身<br/>&nbsp;&nbsp;function show(obj)&#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;//一一取得items陣列中的物件 並判斷CheckBox是否被勾選 若是則顯示區塊 反之則隱藏<br/>&nbsp;&nbsp;&nbsp;&nbsp;for(var i=0;i&lt;items.length;i++)&#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(items&#91;i&#93;).style.display = obj.checked?&quot;block&quot;:&quot;none&quot;;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#125;<br/>&nbsp;&nbsp;&#125;<br/>//--&gt;<br/>&lt;/script&gt;</div><br/>在Body中<br/><div class="code">&lt;input type=&quot;checkbox&quot; onclick=&quot;show(this,&#039;s2&#039;);&quot; /&gt;<br/>&lt;div id=&quot;s2&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;<br/>&lt;input type=&quot;checkbox&quot; onclick=&quot;show(this,&#039;s3&#039;);&quot; /&gt;<br/>&lt;div id=&quot;s3&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;</div><br/>Tags - <a href="https://blog.apao.idv.tw/tags/css/" rel="tag">css</a> , <a href="https://blog.apao.idv.tw/tags/javascript/" rel="tag">javascript</a> , <a href="https://blog.apao.idv.tw/tags/%25E9%259A%25B1%25E8%2597%258F/" rel="tag">隱藏</a> , <a href="https://blog.apao.idv.tw/tags/%25E6%258E%25A7%25E5%2588%25B6/" rel="tag">控制</a> , <a href="https://blog.apao.idv.tw/tags/%25E9%2581%25B8%25E9%25A0%2585/" rel="tag">選項</a>
]]>
</description>
</item><item>
<link>https://blog.apao.idv.tw/post//#blogcomment</link>
<title><![CDATA[[評論] [checkbox] 隱藏 顯示]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[評論]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>https://blog.apao.idv.tw/post//#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>