Çoklu filtreleme

08-05-2023, 17:27:49

#1

TuorElanesse
Merhaba javascript ile bir noktada tıkandım. aşadağıdaki gibi kod bloğum var sıkıntısız çalışıyor. Fakat buna extra 1-2 adet daha checkbox koyacağım başka özellik için. Bunu nasıl çoklayabilirim.
```
$('.filter').hide();
var val=true;

$('input[name="checkbox1"]:checked').each(function(i){
   $('.check-'+$(this).val()).show();
    val=false;
});

if(val){
  $('.filter').show();
}
```
Yani amacım şu 3 adet checkbox grubu olacak. 1. den 2. den ve 3.den seçimler yapılacak. Hepsini içeren divler gözükecek sadece.

08-05-2023, 17:33:16

~~vido~~

Üyeliği durduruldu

$('.filter').hide();

$('input[name="checkbox1"], input[name="checkbox2"], input[name="checkbox3"]').change(function() {
  var selectedValues = [];
  
  $('input[name="checkbox1"]:checked').each(function() {
    selectedValues.push($(this).val());
  });
  
  $('input[name="checkbox2"]:checked').each(function() {
    selectedValues.push($(this).val());
  });
  
  $('input[name="checkbox3"]:checked').each(function() {
    selectedValues.push($(this).val());
  });
  
  if (selectedValues.length > 0) {
    $('.filter').hide();
    selectedValues.forEach(function(value) {
      $('.check-' + value).show();
    });
  } else {
    $('.filter').show();
  }
});

checkbox1, checkbox2 ve checkbox3 isimlerine sahip 3 checkbox grubu var. Herhangi bir grubun durumu değiştiğinde, seçilen değerleri topluyoruz. Ardından, eğer seçilen en az bir değer varsa, .filter sınıfına sahip tüm divleri gizliyoruz ($('.filter').hide()), ve seçilen değerlere göre ilgili divleri gösteriyoruz ($('.check-' + value).show()). Eğer hiçbir değer seçilmemişse, tüm divleri gösteriyoruz ($('.filter').show()).

basit örnekle anlatmaya çalıştım, umarım yardımcı olur. kolay gelsin.

08-05-2023, 17:33:48

SWRNET

ChatGPT-4 diyor ki;

Merhaba! İstediğiniz şekilde kodu düzenlemek için, checkbox gruplarını döngüler içinde işleyebiliriz. Öncelikle, HTML kısmında yeni checkbox'ları ekleyelim ve her bir grubu bir div içine alalım:

<div class="checkbox-group">
  <input type="checkbox" name="checkbox1" value="1">
  <input type="checkbox" name="checkbox1" value="2">
  <input type="checkbox" name="checkbox1" value="3">
</div>

<div class="checkbox-group">
  <input type="checkbox" name="checkbox2" value="4">
  <input type="checkbox" name="checkbox2" value="5">
  <input type="checkbox" name="checkbox2" value="6">
</div>

<div class="checkbox-group">
  <input type="checkbox" name="checkbox3" value="7">
  <input type="checkbox" name="checkbox3" value="8">
  <input type="checkbox" name="checkbox3" value="9">
</div>

Daha sonra, jQuery ile bu checkbox gruplarını işlemek için aşağıdaki JavaScript kodunu kullanabiliriz:

$('.filter').hide();
var val = true;

$('.checkbox-group').each(function() {
  var checked = false;
  
  $(this).find('input:checked').each(function(i) {
    $('.check-' + $(this).val()).show();
    val = false;
    checked = true;
  });
  
  if (!checked) {
    $(this).find('input').each(function(i) {
      $('.check-' + $(this).val()).show();
    });
  }
});

if (val) {
  $('.filter').show();
}

Bu kod, her bir checkbox grubunu işleyerek her birinde seçilenleri kontrol eder. Eğer bir grupta hiçbir checkbox seçilmemişse, o gruptaki tüm div'leri gösterir. Eğer seçim yapılmışsa, sadece seçili olan div'leri gösterir. Bu şekilde her bir grup için filtreleme işlemi gerçekleştirilmiş olur.

08-05-2023, 21:20:00

#4

TuorElanesse
vido adlı üyeden alıntı: mesajı görüntüle
$('.filter').hide(); $('input[name="checkbox1"], input[name="checkbox2"], input[name="checkbox3"]').change(function() { var selectedValues = []; $('input[name="checkbox1"]:checked').each(function() { selectedValues.push($(this).val()); }); $('input[name="checkbox2"]:checked').each(function() { selectedValues.push($(this).val()); }); $('input[name="checkbox3"]:checked').each(function() { selectedValues.push($(this).val()); }); if (selectedValues.length > 0) { $('.filter').hide(); selectedValues.forEach(function(value) { $('.check-' + value).show(); }); } else { $('.filter').show(); } });
checkbox1, checkbox2 ve checkbox3 isimlerine sahip 3 checkbox grubu var. Herhangi bir grubun durumu değiştiğinde, seçilen değerleri topluyoruz. Ardından, eğer seçilen en az bir değer varsa, .filter sınıfına sahip tüm divleri gizliyoruz ($('.filter').hide()), ve seçilen değerlere göre ilgili divleri gösteriyoruz ($('.check-' + value).show()). Eğer hiçbir değer seçilmemişse, tüm divleri gösteriyoruz ($('.filter').show()).

basit örnekle anlatmaya çalıştım, umarım yardımcı olur. kolay gelsin.
hocam aslında tam istediğim olay fakat şöyle bir sıkıntısı var. örneğin diyelim 3 tane divim var. 'filter div1', filter'div2' ve 'filter div1 div2' diye gidiyor diyelim. checkboxdan div1 ve div2 seçtiğimde classı div1 div2 içerenleri değil div1 ve div2yi aynı anda içerenleri göstersin istiyorum. yani çoklu filtre yapıldıysa ortak olanlar cıksın
SWRNET adlı üyeden alıntı: mesajı görüntüle
ChatGPT-4 diyor ki;

Merhaba! İstediğiniz şekilde kodu düzenlemek için, checkbox gruplarını döngüler içinde işleyebiliriz. Öncelikle, HTML kısmında yeni checkbox'ları ekleyelim ve her bir grubu bir div içine alalım:

<div class="checkbox-group"> <input type="checkbox" name="checkbox1" value="1"> <input type="checkbox" name="checkbox1" value="2"> <input type="checkbox" name="checkbox1" value="3"> </div> <div class="checkbox-group"> <input type="checkbox" name="checkbox2" value="4"> <input type="checkbox" name="checkbox2" value="5"> <input type="checkbox" name="checkbox2" value="6"> </div> <div class="checkbox-group"> <input type="checkbox" name="checkbox3" value="7"> <input type="checkbox" name="checkbox3" value="8"> <input type="checkbox" name="checkbox3" value="9"> </div>
Daha sonra, jQuery ile bu checkbox gruplarını işlemek için aşağıdaki JavaScript kodunu kullanabiliriz:

$('.filter').hide(); var val = true; $('.checkbox-group').each(function() { var checked = false; $(this).find('input:checked').each(function(i) { $('.check-' + $(this).val()).show(); val = false; checked = true; }); if (!checked) { $(this).find('input').each(function(i) { $('.check-' + $(this).val()).show(); }); } }); if (val) { $('.filter').show(); }
Bu kod, her bir checkbox grubunu işleyerek her birinde seçilenleri kontrol eder. Eğer bir grupta hiçbir checkbox seçilmemişse, o gruptaki tüm div'leri gösterir. Eğer seçim yapılmışsa, sadece seçili olan div'leri gösterir. Bu şekilde her bir grup için filtreleme işlemi gerçekleştirilmiş olur.
İşlemedi ne yazık ki hocam.

08-05-2023, 22:50:25

~~vido~~

Üyeliği durduruldu

TuorElanesse adlı üyeden alıntı: mesajı görüntüle

hocam aslında tam istediğim olay fakat şöyle bir sıkıntısı var. örneğin diyelim 3 tane divim var. 'filter div1', filter'div2' ve 'filter div1 div2' diye gidiyor diyelim. checkboxdan div1 ve div2 seçtiğimde classı div1 div2 içerenleri değil div1 ve div2yi aynı anda içerenleri göstersin istiyorum. yani çoklu filtre yapıldıysa ortak olanlar cıksın

İşlemedi ne yazık ki hocam.

      $(document).ready(() => {
        $(".filter").hide();
        $(".filter-checkbox").on("change", () => {
          const selectedClasses = [];
          $(".filter-checkbox:checked").each(function () {
            selectedClasses.push($(this).val());
          });
          if (selectedClasses.length > 0) {
            const selector = selectedClasses.join("-");
            console.log("selector", selector);
            $(".filter").hide();
            $("." + selector).show();
          } else {
            $(".filter").hide();
          }
        });
      });

    <div class="filter">Div 1</div>
    <div class="filter">Div 1</div>
    <div class="filter">Div 2</div>
    <div class="filter div1-div2">Div 1 and Div 2</div>
    <div class="filter erkek-xl">Erkek Xl</div>
    <input type="checkbox" class="filter-checkbox" value="div1" />Filter 1
    <input type="checkbox" class="filter-checkbox" value="div2" />Filter 2
    <input type="checkbox" class="filter-checkbox" value="div3" />Filter 3
    <input type="checkbox" class="filter-checkbox" value="erkek" />Filter Erkek
    <input type="checkbox" class="filter-checkbox" value="xl" />Filter Xl
    <input type="checkbox" class="filter-checkbox" value="div3" />Filter M

ortak olanları göstermek için bi küme oluşturulmalı. örnek: erkek ve xl olanlar seçildiğinde.