13 Nisan 2024 00:35, Cumartesi 1664 0
<div> <div class="items"> <div><input type="checkbox" id="item1"> <label for="item1">Check 1</label></div> <div><input type="checkbox" id="item2"> <label for="item2">Check 2</label></div> <div><input type="checkbox" id="item3"> <label for="item3">Check 3</label></div> <div><input type="checkbox" id="item4"> <label for="item4">Check 4</label></div> <div><input type="checkbox" id="item5"> <label for="item5">Check 5</label></div> </div> <div class="button"> <input type="checkbox" id="check_all" > <label for="check_all"> Tümünü Seç</label> </div> </div>
<style> * {margin:0;padding: 0;box-sizing: border-box;} body {background:#111;display:flex;justify-content:center;color:#fff;font-family:calibri;font-size:1.2rem; } input,label {cursor: pointer;margin-right:1rem} div { border-radius:1rem;padding:1rem 4rem;text-align:center; } .items { background-color: #dd3a00;padding:2rem;margin-top: 2rem} .button { background-color: #dd3a00;padding:1rem;margin-top: 2rem} .items div:hover { background-color:rgba(255,255,255,.3) } .button:hover{ background-color:#000 } @media(min-width:7611px and max-width:1200px) {html {font-size:14px} } @media(max-width:760px) {html {font-size:10px} } </style>
<!-- JQUERY BAĞLANTISI --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script type="text/javascript"> $("#check_all").click(function() { $('input:checkbox').prop('checked', $(this).prop("checked")); }); </script>
GÜNCELLENİYOR..
Toplam 7 Makale
Lütfen yorumlarınızda saygılı, yapıcı ve anlaşılır bir dil kullanın. Küfür, hakaret ya da spam içerikler onaylanmaz.