jquery filtering checkbox list by input box

Question

I have a long checkbox list (with same name). I want create a filtering system based on input in a text box. I mean, when I write "ter" in my text box, I want to show only those chechboxes which values matches %ter% (means have the phrase "ter" anywhere). What is the best way to achieve that using jquery? My apologies as I am very new to jquery.

<input type="checkbox" name="chk" id="chk1" value="casual">casual
<input type="checkbox" name="chk" id="chk2" value="intermediate">intermediate
<input type="checkbox" name="chk" id="chk3" value="hunter">hunter
<input type="checkbox" name="chk" id="chk4" value="forest">forest
<input type="checkbox" name="chk" id="chk5" value="term">extreme
<input type="checkbox" name="chk" id="chk6" value="river">river
<input type="checkbox" name="chk" id="chk7" value="beach">beach
<input type="text" id="chkfilter">

So, whenever I write "ter" in the text box, checkbox 2,3 and 5 should be visible, others should be hidden/gone. How to do that? Using div for each individual item? Also, how to search using jquery to match %ter%

adeneo · Accepted Answer · 2013-01-05 17:34:10Z

13

When you type something in the textbox, check the checkboxes to see it that string exists in the value with indexOf, and set the display property based on that (I used block, but inline is probably correct for checkboxes):

$('#chkfilter').on('keyup', function() {
    var query = this.value;

    $('[id^="chk"]').each(function(i, elem) {
          if (elem.value.indexOf(query) != -1) {
              elem.style.display = 'block';
          }else{
              elem.style.display = 'none';
          }
    });
});

The text after the checkbox is not part of the checkbox and will not be hidden, to do that you should probably wrap it in a label and do something like this JSBIN ??

edited Jan 5, 2013 at 17:34

answered Jan 5, 2013 at 17:28

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abdfahim Over a year ago

great .. your example perfectly serves my purpose .. only thing is, I would like to re-arrange the whole thing so that there is no empty lines after filtering ... hopefully I can do it myself .. thanks :)

pown Over a year ago

Excellent!! In case of case-insensitive search use toLowerCase(). Eg. elem.value.toLowerCase().indexOf(query)

Nic · Accepted Answer · 2013-01-05 17:34:05Z

2

You could filter by value using the jQuery "Attribute Contains Selector" and then hide or disable the checkboxes. About the label - there are many ways to do this. Either wrap the whole thing into a div and use .parent() on the filtered checkboxes to hide the whole thing, or wrap the label text into a <label> with a corresponding id to hide it afterwards.

Take a look at the jQuery API Docs: jQUery API - Attribute Contains Selector

answered Jan 5, 2013 at 17:34

Nic

5812 silver badges11 bronze badges

Comments

nikunj sobhashana · Accepted Answer · 2015-11-06 12:14:09Z

2

$(":checkbox").each(function () {
    $(this).add(this.nextSibling)
        .add(this.nextSibling.nextSibling)
        .wrapAll("<label class='country'></label>")
})
$("#text").keyup(function () {
    var re = new RegExp($(this).val(), "i")
    $('.country').each(function () {
        var text = $(this).text(),
            matches = !! text.match(re);
        $(this).toggle(matches)
    })
})

i m using this solution for filter checkbox name using textbox value

answered Nov 6, 2015 at 12:14

nikunj sobhashana

18110 bronze badges

Collectives™ on Stack Overflow

jquery filtering checkbox list by input box

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related