April 12, 2015
點擊在新視窗中瀏覽此圖片
同時秀出價格

點擊在新視窗中瀏覽此圖片
同時秀出價格

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
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我