標題：Radio 選擇時 隱藏或是秀出 區塊 
出處：A.PAO designSTUDIO BLOG
時間：Sun, 12 Apr 2015 20:07:43 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1106/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2150

同時秀出價格


點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2151

同時秀出價格

CSS (head)
/*隱藏區塊用*/
.box{display: none;}
/*秀出區塊用*/
.bS01{}
.bS02{}
.bS03{}
/*區塊範圍指定*/
.bBW{}



JavaScript (head)
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="bOne"){
                $(".box").hide();
                $(".bS01").show();
            }
            if($(this).attr("value")=="bTwo"){
                $(".box").hide();
                $(".bS02").show();
            }

        });
    });
</script>


HTML Code (body)

信用卡 / ATM
貨到付款

<input name="Paytype" type="radio" value="bOne" checked="checked">信用卡 / ATM
<input name="Paytype" type="radio" value="bTwo">貨到付款

<!-- 如果開始要顯示要加入 style="display:block;" 不顯示則加入  style="display:none;"-->
<div class="bS01 box bBW" style="display:block;">線上刷卡機制將客戶直接連結到各「銀行網路信用卡機制」，當客戶在本公司平台刷卡時，本公司及其它任何人均無法取得客戶信用卡資料。同時本公司平台網路安全受網際威信SSL安全機制的嚴格保護。將資料作複雜的運算及編碼，讓客戶安心地自由的瀏覽並付費，而無後顧之憂。<br>
我們的線上付款方式有以下機制: <br>
一.信用卡(限<font color="#FF0000">NT100元</font>以上): Visa、 Master、JCB、U卡、America Express
<br>
二.銀行晶片卡線上轉帳(限NT200~20,000以內) 線上交易成功後, 我們將立即為你處理出貨的動作,謝謝。</div>

<div class="bS02 box bBW">本公司與各大知名的宅配公司合作，您可以等到收到商品的同時，將貨款交付給該宅配公司即可。本項服務將代宅配代收手續費<span style=" color:red;">30元</span>。
</div>

<!-- 如果開始要顯示要加入 style="display:block;" 不顯示則加入  style="display:none;"-->
<span class="bS01 box">0元</span><span class="bS02 box">30元</span>


參考：
http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button


Generated by Bo-blog 2.1.1 Release