Generic placeholder image

Membuat all Checklist pada checkbox

Ditanyakan pada tanggal 31 January 2019 oleh Ridho Amdeni

Saya ingin menanyakan saya ada beberapa checkbox, bisa di lihat di sni untuk gambar dari checkbox nya

Pada gambar di sana untuk bagian payment nya terdapat collapse yang di mana icon + di klik maka luar sub check box nya jadi saya ingin menanyakan bagaimana cara membuat ketika payment nya di klik pada bagian sub nya juga ngikut itu saya buat pada bagian pop up nya, saya butuh html,jquery or js nya aja ga sama nilai nya, terima kasih mohon bantuannya

Untuk code saya letakin di sini yahhttps://pastebin.com/fqHEFHH6

1 JAWABAN

Generic placeholder image
Ahmad Oriza menjawab pada tanggal 31 January 2019

Untuk melakukan hal demikian perlu menggunakan Jquery mas. Gunakan Jquery prop check dan sebagainya. Oh iya, di masing masing input saya lihat pakai ID nama yang sama di tag yang berbeda, itu gak boleh mas. ID hanya boleh tampil sekali saja dalam halaman, kalau mau pakai class aja.

Sebaiknya mas belajar lagi tentang dasar dasar Jquery dan teori selector. Sudah kita sediakan pada course premium CP.

Ini saya bikin contoh berdasarkan kasus diatas, tapi tidak persis kodenya seperti punya mas, tapi saya harap mas langsung ngerti. Silahkan bikin script ini di file terpisah dahulu, buat bahan pelajaran :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="checkbox" style="padding-left:5px">
    <button type="button" data-toggle="collapse" data-target="#pay_collapse" style="background-color:#228B22" class="btn btn-primary btn-sm">+</button>
    <label>
        <input type="checkbox" id="allpayment" class="flat"> Payment
    </label>
</div>

<div class="collapse" id="pay_collapse">  
    <div class="checkbox" style="padding-left: 70px">
        <label>
            <!-- 
            Kasih nama classnya, misal checkItem, ini harus pakai class jangan ID 
            Biar bisa multi tag. ID hanya boleh 1 kali tampil dalam halaman 
            -->
            <input type="checkbox" class="checkItem flat"> Payment List
        </label>
    </div>

    <div class="checkbox" style="padding-left: 70px">
        <label>
            <input type="checkbox" class="checkItem flat"> Payment Bulk
        </label>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

$('#allpayment').click(function(){

    if ($(this).is(':checked') ==  true)
    {
        $('.checkItem').prop('checked', true);
    }
    else
    {
        $('.checkItem').prop('checked', false);
    }
})

</script>

Hasilnya seperti ini :