jQuery एकाधिक चेकबॉक्स फ़िल्टर समूह

मैं चेकबॉक्स और jQuery का उपयोग करके फ़िल्टर करने योग्य उत्पादों की एक सूची बनाने की कोशिश कर रहा हूं। मेरे पास कुछ कोड काम कर रहा है (पिछले उत्तरों के लिए धन्यवाद जो मैंने यहां पाया है)।jQuery एकाधिक चेकबॉक्स फ़िल्टर समूह

मैं आइटम दिखाने या छिपाने के लिए सीएसएस कक्षाओं का उपयोग करना चाहता हूं।

मैं रंग, फिनिश और कीमत से आइटम को फ़िल्टर करने की कोशिश कर रहा हूं और समस्या यह है कि मेरा कोड वर्तमान में विभिन्न फ़िल्टर समूहों का उपयोग करके या आइटम का चयन कर रहा है।

मुझे प्रत्येक समूह (जैसे रंग) के भीतर या फ़िल्टर करने में सक्षम होने की आवश्यकता है, लेकिन जब चेकबॉक्स विभिन्न समूहों में हैं। जिस तरह से मैं ऐसा करना चाहता हूं वह '।' जोड़कर है। कक्षा के नामों के बीच, इसलिए आइटम केवल तभी फ़िल्टर करेगा जब रंग और फिनिश और मूल्य सीएसएस कक्षाएं मेल खाती हैं।

उदाहरण # div.dark.smooth.b

मैं Firebug कंसोल में इस की कोशिश की है और मैं आइटम मैं इस तरह से की जरूरत है फ़िल्टर कर सकते हैं, लेकिन दुर्भाग्य से मैं कैसे jQuery में इस लक्ष्य को हासिल करने के लिए पता नहीं है। मेरा कोड नीचे है ...

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<ul id="colour"> 
<li><input type="checkbox" name="colour" value="dark"> Dark</li> 
<li><input type="checkbox" name="colour" value="medium"> Medium</li> 
<li><input type="checkbox" name="colour" value="light"> Light</li> 
</ul> 

<ul id="finish"> 
<li><input type="checkbox" name="finish" value="smooth"> Smooth</li> 
<li><input type="checkbox" name="finish" value="riven"> Riven</li> 
<li><input type="checkbox" name="finish" value="honed"> Honed</li> 
</ul> 

<ul id="price"> 
<li><input type="checkbox" name="price" value="a"> Up to £25</li> 
<li><input type="checkbox" name="price" value="b"> £25 to £45</li> 
<li><input type="checkbox" name="price" value="c"> £45 to £65</li> 
<li><input type="checkbox" name="price" value="d"> £65 to £85</li> 
<li><input type="checkbox" name="price" value="e"> over £85</li> 
</ul> 

<div class="dark smooth b">dark smooth b</div> 
<div class="medium honed d">medium honed d</div> 
<div class="dark smooth d">dark smooth d</div> 
<div class="light smooth b">light smooth b</div> 
<div class="light riven b">light riven b</div> 
<div class="dark riven c">dark riven c</div> 
<div class="medium riven a">medium riven a</div> 

<script> 

$("#colour :checkbox,#finish :checkbox,#price :checkbox").click(function() { 

     $("div").hide(); 

     $("#colour :checkbox:checked").each(function() { 
      $("." + $(this).val()).slideDown('slow'); 
     }); 
     $("#finish :checkbox:checked").each(function() { 
      $("." + $(this).val()).slideDown('slow'); 
     }); 
     $("#price :checkbox:checked").each(function() { 
      $("." + $(this).val()).slideDown('slow'); 
     }); 

    }); 

</script> 
</body> 
</html>

स्रोत

2012-12-03 John Roy

कोशिश वर्ग मूल्यों में खाली स्थान से बचने के लिए। – arulmr

त्वरित विचार: सीधे स्लाइडडाउन का उपयोग करने के बजाय, परिणामों को एक सरणी में रखें ताकि आपके पास 3 सरणी हों, एक प्रति श्रेणी (एक उदाहरण के लिए [अंधेरा, प्रकाश] और अन्य [चिकनी, riven] और इसी तरह ...)। फिर अपने चयनकर्ताओं को केवल सरणी को मिलाकर बनाएं: dark.smooth, dark.riven, light.smooth, light.riven इत्यादि। – Tallmaris

अपनी 'स्क्रिप्ट' टैग पर कृपया 'टाइप = "टेक्स्ट/जावास्क्रिप्ट" से बचने के लिए विशेषता जोड़ें कुछ स्थितियों में मुद्दों। –

ठीक है - मैं सीएसएस वर्ग को गलत समझा के बाद से केवल एक समूह से एक आइटम है, बस अपने चेकबॉक्स पर क्लिक करें समारोह नीचे इस चिपकाने कोशिश करते हैं और यह आप ऐसा करने के तरीके पर एक सूचक दे देंगे ..

 var ColorArray = []; 
     var FinishArray = []; 
     var PriceArray = []; 

     ColorArray[0] = "Dark"; 
     ColorArray[1] = "Medium"; 

     FinishArray[0] = "Smooth"; 
     FinishArray[1] = "Riven"; 

     PriceArray[0] = "a"; 
     PriceArray[1] = "b"; 
     PriceArray[2] = "c"; 



     for (c = 0; c < ColorArray.length ; c++) { 
      for (f = 0; f < FinishArray.length ; f++) { 
       for (p = 0; p < PriceArray.length ; p++) { 
           alert(ColorArray[c] +"."+ FinishArray[f] + "."+PriceArray[p]); 
       } 
      } 
     } 

     }) 

EDIT - the full working solution based on the above method [with 4 select options now] is pasted below. 


    <!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

    <ul id="filter1"> 
     <li> 
      <input type="checkbox" name="filter1" value="dark"> 
      Dark</li> 
     <li> 
      <input type="checkbox" name="filter1" value="medium"> 
      Medium</li> 
     <li> 
      <input type="checkbox" name="filter1" value="light"> 
      Light</li> 
    </ul> 

    <ul id="filter2"> 
     <li> 
      <input type="checkbox" name="filter2" value="sm"> 
      Small</li> 
     <li> 
      <input type="checkbox" name="filter2" value="med"> 
      Medium</li> 
     <li> 
      <input type="checkbox" name="filter2" value="lge"> 
      Large</li> 
    </ul> 

    <ul id="filter3"> 
     <li> 
      <input type="checkbox" name="filter3" value="smooth"> 
      Smooth</li> 
     <li> 
      <input type="checkbox" name="filter3" value="riven"> 
      Riven</li> 
     <li> 
      <input type="checkbox" name="filter3" value="honed"> 
      Honed</li> 
    </ul> 

    <ul id="filter4"> 
     <li> 
      <input type="checkbox" name="filter4" value="a"> 
      Up to £25</li> 
     <li> 
      <input type="checkbox" name="filter4" value="b"> 
      £25 to £45</li> 
     <li> 
      <input type="checkbox" name="filter4" value="c"> 
      £45 to £65</li> 
     <li> 
      <input type="checkbox" name="filter4" value="d"> 
      £65 to £85</li> 
     <li> 
      <input type="checkbox" name="filter4" value="e"> 
      over £85</li> 
    </ul> 

    <p><a class="showall" href="#" />Clear Filters</a></p> 

    <div class="list dark sm smooth b">dark small smooth b</div> 
    <div class="list medium lge honed d">medium large honed d</div> 
    <div class="list dark med smooth d">dark medium smooth d</div> 
    <div class="list light sm smooth b">light small smooth b</div> 
    <div class="list light lge riven b">light large riven b</div> 
    <div class="list dark sm riven c">dark small riven c</div> 
    <div class="list medium med riven a">medium medium riven a</div> 
    <div class="list medium lge honed e">medium large honed e</div> 

    <div class="NoResults"></div> 

    <script> 

     $("#filter1 :checkbox,#filter2 :checkbox,#filter3 :checkbox,#filter4 :checkbox").click(function() { 

      $("div.list").hide(); 

      var Filter1Array = []; 
      var Filter2Array = []; 
      var Filter3Array = []; 
      var Filter4Array = []; 
      var filter1_Count = 0, filter2_Count = 0, filter3_Count = 0, filter4_Count = 0; 

      $("#filter1 :checkbox:checked").each(function() { 
       Filter1Array[filter1_Count] = $(this).val(); 
       filter1_Count++ 
      }); 

      $("#filter2 :checkbox:checked").each(function() { 
       Filter2Array[filter2_Count] = $(this).val(); 
       filter2_Count++ 
      }); 

      $("#filter3 :checkbox:checked").each(function() { 
       Filter3Array[filter3_Count] = $(this).val(); 
       filter3_Count++ 
      }); 

      $("#filter4 :checkbox:checked").each(function() { 
       Filter4Array[filter4_Count] = $(this).val(); 
       filter4_Count++ 
      }); 

      var filter1string 
      var filter2string 
      var filter3string 
      var filter4string 

      var filter1checked = false 
      var filter2checked = false 
      var filter3checked = false 
      var filter4checked = false 

      if (filter1_Count == 0) { filter1_Count = 1; } else { filter1checked = true; } 
      if (filter2_Count == 0) { filter2_Count = 1; } else { filter2checked = true; } 
      if (filter3_Count == 0) { filter3_Count = 1; } else { filter3checked = true; } 
      if (filter4_Count == 0) { filter4_Count = 1; } else { filter4checked = true; } 

      for (f1 = 0; f1 < filter1_Count; f1++) { 

       if (Filter1Array[f1] != null) { filter1string = '.' + Filter1Array[f1] } else { filter1string = '' } 

       for (f2 = 0; f2 < filter2_Count; f2++) { 

        if (Filter2Array[f2] != null) { filter2string = '.' + Filter2Array[f2] } else { filter2string = '' } 

        for (f3 = 0; f3 < filter3_Count; f3++) { 

         if (Filter3Array[f3] != null) { filter3string = '.' + Filter3Array[f3] } else { filter3string = '' } 

         for (f4 = 0; f4 < filter4_Count; f4++) { 

          if (Filter4Array[f4] != null) { filter4string = '.' + Filter4Array[f4] } else { filter4string = '' } 

          var QueryString = filter1string + filter2string + filter3string + filter4string 
          $(QueryString).fadeIn('fast'); 
         } 
        } 
       } 
      } 

      if (!filter1checked && !filter2checked && !filter3checked && !filter4checked) { 
       $("div.list").fadeIn('fast'); 
      }; 

      if ($('div.list:visible').length === 0) { 
       $(".NoResults").html("<p class='error'>No products match your filter selections. Please try a different combination.</p>"); 
      } 
      else { $(".NoResults").html(""); } 

     }); 

     $('a.showall').click(function() { 
      $("div.list").fadeIn('fast'); 
      $("#filter1 :checkbox").removeAttr('checked'); 
      $("#filter2 :checkbox").removeAttr('checked'); 
      $("#filter3 :checkbox").removeAttr('checked'); 
      $("#filter4 :checkbox").removeAttr('checked'); 
      $(".NoResults").html(""); 
      return false; 
     }); 

    </script> 
</body> 
</html>

स्रोत

2012-12-03 13:31:28

धन्यवाद आपके सुझावों के लिए अनुदान। –

धन्यवाद अनुदान - यह एक आदर्श समाधान है और बनाए रखने में आसान है। –

नेस्टेड लूप के साथ व्यक्तिगत लूप को बदलें।

संपादित करें: आप भी हर हालत के लिए जाँच करने के लिए होगा:

var fc=false; 
    var ff=false; 
    var fp=false; 
    $("#colour :checkbox:checked").each(function() { 
     fc=true; 
     var color = $(this).val(); 
     $("#finish :checkbox:checked").each(function() { 
      ff=true; 
      var finish = $(this).val(); 
      $("#price :checkbox:checked").each(function() { 
       fp=true; 
       $("." + color + "." + finish + "." + $(this).val()).slideDown('slow'); 
      }); 
      if(!fp) { 
       $("." + color + "." + finish).slideDown('slow'); 
      } 
     }); 
     if(!ff) { 
      $("#price :checkbox:checked").each(function() { 
       fp=true; 
       $("." + color + "." + $(this).val()).slideDown('slow'); 
      }); 
      if(!fp) { 
       $("." + color).slideDown('slow'); 
      } 
     } 
    }); 
    if(!fc) { 
     $("#finish :checkbox:checked").each(function() { 
      ff = true; 
      var finish = $(this).val(); 
      $("#price :checkbox:checked").each(function() { 
       fp=true; 
       $("." + finish + "." + $(this).val()).slideDown('slow'); 
      }); 
      if(!fp) { 
       $("." + finish).slideDown('slow'); 
      } 
     }); 
     if(!ff) { 
      $("#price :checkbox:checked").each(function() { 
       $("." + $(this).val()).slideDown('slow'); 
      }); 
     } 
    }

स्रोत

2012-12-03 11:55:54

आपके उत्तर के लिए धन्यवाद। पहला भाग काम करता है लेकिन मैं नहीं चाहता कि उपयोगकर्ता को सभी 3 समूहों में क्लिक करना पड़े। जब मैं दूसरा और तीसरा हिस्सा जोड़ता हूं, तो फ़िल्टर अपेक्षा के अनुसार काम नहीं लगते हैं। –

बहुत बहुत धन्यवाद। यह पूरी तरह से काम करता है! –

चेक बॉक्स के लिए .click समारोह का उपयोग करके सभी के जुड़े मूल्य प्राप्त करने के बारे में पृष्ठ पर चेक बॉक्स की जाँच की और निर्माण कैसे अपने वर्ग स्ट्रिंग यानी dark.riven.b.light.a - क्या वह काम करेगा?

स्रोत

2012-12-03 12:20:53

नहीं क्योंकि प्रत्येक समूह से केवल एक वर्ग होगी जिसमें क्लास स्ट्रिंग में चेकबॉक्स चेक किया गया हो। –

/चुना जाएगा, रेडियो बटन उचित लगते हैं, तो चाल तब होती है जब यह चालू हो और क्लिक हो जाए।

मैंने आपके मार्कअप को थोड़ा और कोड जोड़ा है ताकि रेडियो बटन को "अनचेक" करने की क्षमता को प्रदर्शित किया जा सके। कार्य उदाहरण बेला: http://jsfiddle.net/MarkSchultheiss/mBAaW/

रेडियो बहु-चयन

<div id="myRadios"> 
<ul id="colour"> 
    <li><label><input type="radio" name="colour" value="dark" >Dark</label></li> 
    <li><label><input type="radio" name="colour" value="medium">Medium</label></li> 
    <li><label><input type="radio" name="colour" value="light">Light</label></li> 
</ul> 

<ul id="finish"> 
<li><input type="radio" name="finish" value="smooth">Smooth</li> 
<li><input type="radio" name="finish" value="riven">Riven</li> 
<li><input type="radio" name="finish" value="honed">Honed</li> 
</ul> 

<ul id="price"> 
<li><input type="radio" name="price" value="a">Up to £25</li> 
<li><input type="radio" name="price" value="b">£25 to £45</li> 
<li><input type="radio" name="price" value="c">£45 to £65</li> 
<li><input type="radio" name="price" value="d">£65 to £85</li> 
<li><input type="radio" name="price" value="e">over £85</li> 
</ul></div> 
<div id="founditems"> 
<div class="dark smooth b">dark smooth b</div> 
<div class="medium honed d">medium honed d</div> 
<div class="dark smooth d">dark smooth d</div> 
<div class="light smooth b">light smooth b</div> 
<div class="light riven b">light riven b</div> 
<div class="dark riven c">dark riven c</div> 
<div class="medium riven a">medium riven a</div> 
</div> 
<div id="shower">empty</div>

नमूना कोड:

// radio multi-select 
var mycolors = []; 
var myfinish = []; 
var myprice = []; 

function checkit(myarray, myclass) { 
    var indisun = $.inArray(myclass, myarray); 
    return indisun; 
} 
$("#colour,#finish,#price").on("click", ":radio", function(event) { 

    $("#founditems div").hide(); 
    var mytarget = event.target; 
    $("#shower").text(""); 
    if ($(mytarget).hasClass("iam")) { 
     $(mytarget).parents("ul").find("input:radio").removeClass("iam"); 
     mytarget.checked = false; 
    } else { 
     $(mytarget).parents("ul").find("input:radio").removeClass("iam"); 
     $(mytarget).addClass("iam"); 
    }; 
    var mycurrent = []; 
    var hasColor = $("#colour :radio:checked"); 
    var hasFinish = $("#finish :radio:checked"); 
    var hasPrice = $("#price :radio:checked"); 

    var radios = $("#colour :radio,#finish :radio,#price :radio"); 
    radios.filter(":checked").each(function() { 
     var disun = $(this).val(); 
     mycurrent.push(disun); 
    }); 
    $("#founditems div").removeClass("iam"); 

    $('#founditems div').each(function() { 
     var adiv = $(this); 
     $.each(mycurrent, function() { 
      if (adiv.hasClass(this)) { 
       adiv.addClass("iam"); 
      }; 
     }); 
    }); 
    //just to show current selection(s) 
    $.each(mycurrent, function() { 
     $("#shower").text($("#shower").text() + this); 
    }); 
    var currCol = hasColor.length ? hasColor.val() : false; 
    var currFin = hasFinish.length ? hasFinish.val() : false; 
    var currPri = hasPrice.length ? hasPrice.val() : false; 
    $.each(mycurrent, function() { 
     var currVal = this; 
     var itsaColor = checkit(mycolors, this); 
     var itsaFinish = checkit(myfinish, this); 
     var itsaPrice = checkit(myprice, this); 
     $('#founditems div').each(function() { 
      var adiv = $(this); 
      if (adiv.hasClass(currVal)) { 
       if (currCol && !adiv.hasClass(currCol) && itsaColor) { 
        adiv.removeClass("iam"); 
       } 
       if (currFin && !adiv.hasClass(currFin) && itsaFinish) { 
        adiv.removeClass("iam"); 
       }; 
       if (currPri && !adiv.hasClass(currPri) && itsaPrice) { 
        adiv.removeClass("iam"); 
       }; 
      } 
     }); 
    }); 

    $('#founditems div.iam').slideDown("slow"); 
});

स्रोत

2012-12-03 23:46:48

धन्यवाद आपके सुझावों के लिए चिह्नित करें। मुझे एक समाधान की आवश्यकता थी जहां प्रत्येक समूह में कई विकल्प किए जा सकें। ग्रांट रॉय द्वारा एक पूरी तरह से काम करने वाला उदाहरण प्रदान किया गया है, इसलिए मैंने इसे सबसे अच्छा जवाब चुना है। –

jQuery एकाधिक चेकबॉक्स फ़िल्टर समूह

उत्तर

संबंधित मुद्दे