Checkbox Tümünü Seç Nasıl Yapılır?
İnternette iletişim formlarında sıkça karşılaşmış olduğumuz checkbox olayı sayesinde daha düzgün bir görünüme sahip olmaktayız. Genellikle anket doldururken veya birden fazla sorunun yanıtını alırken HTML yapısı olan checkbox sayesinde veri çekiminde bulunuruz. Bugün ise jQuery kütüphane yapısını kullanarak basit tümünü seç / tümünü iptal et seçeneklerini kullanarak formdaki bütün checkbox’ların işaretlenmesini sağlayabileceğiniz basit kod yapısını paylaşmak istedim. O halde, jQuery kullanılarak HTML’de tümünü seç nasıl yapılır?
<!DOCTYPE HTML> <html lang="tr-TR"> <head> <meta charset="UTF-8"> <title>HTML Checkbox Tümünü Seç Nasıl Yapılır?</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#hepsini_secmelisin").on("click", function() { this.checked ? $(".hepsini_sec").each(function() { this.checked = !0 }) : $(".hepsini_sec").each(function() { this.checked = !1 }) }), $(".hepsini_sec").on("click", function() { $(".hepsini_sec:checked").length == $(".hepsini_sec").length ? $("#hepsini_secmelisin").prop("checked", !0) : $("#hepsini_secmelisin").prop("checked", !1) }) }); </script> </head> <body> <ul> <li><input type="checkbox" id="hepsini_secmelisin" /> Tümünü Seç / İptal Et</li> <ul> <li><input type="checkbox" class="hepsini_sec" value="Meslek edinmek"/>Meslek edinmek</li> <li><input type="checkbox" class="hepsini_sec" value="Arkadaş bulmak"/>Arkadaş bulmak</li> <li><input type="checkbox" class="hepsini_sec" value="Kendimi geliştirmek"/>Kendimi geliştirmek</li> <li><input type="checkbox" class="hepsini_sec" value="Vakit geçirmek"/>Vakit geçirmek</li> <li><input type="checkbox" class="hepsini_sec" value="Ne var ne yok diye bakmak"/>Ne var ne yok diye bakmak</li> </ul> </ul> </body> </html>Gibi yukarıdaki kodu kendinize göre düzenleyebilir ve editleyebilirsiniz.
Yorum Yap
Yorumlar
Yorumlar
