jQuery : Memunculkan div setelah input radio dipilih

Oleh : Abah Razi

بسم الله الرحمن الرحيم

Kita dapat menggunakan opsi <b>data-rel</b> pada input bertype radio  untuk menentukan bagian div mana yang akan dimunculkan setelah opsi yang diberikan oleh input radio tersebut.

Contohnya tampak seperti berikut :


<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
    <div class="sim-mini-desktop content">sim-mini</div>
    <div class="sim-maxi-desktop content">sim-maxi</div>
    <div class="sim-mega-desktop content">sim-mega</div>
</div>

Perhatikan ada tambahan trigger pada identitas class input radio dan content pada identitas class di div yang akan ditampilkan.

Kode jQuery-nya akan tampak seperti berikut :


$('.trigger').click(function() {
    $('.content').hide();
    $('.' + $(this).data('rel')).show();
});

Sementara, untuk menyembunyikan div, kita dapat melakukannya via CSS :


.content {
    display: none;
}

About Reza Ervani 430 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.