Search in checkbox list

Asked

Viewed 61 times

2

I would like to do a real-time search. Similar to the Datatables, but in a "list" of Checkbox. Follow my list of CheckBox

<div class="panel-body">
<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="1"><input name="chk" type="hidden" value="false">
        Profa. Ariadne Tramontina Morais
    </label>
</div>
<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="2"><input name="chk" type="hidden" value="false">
        Profa. Beatriz Pagnanelli Van Sebroeck
    </label>
</div>
<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="3"><input name="chk" type="hidden" value="false">
        Prof. Joao
    </label>
</div>

<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="4"><input name="chk" type="hidden" value="false">
        Profa. Zuleide
    </label>
</div>

javascript html

  • Can you explain better what you want to do? Want to sort a checkbox input table? where you have the table code?

1 answer

1


You can do this using jQuery only by applying the id search-criteria in your research box. Apply a class to your div father, in case I will use the class test. Put the names of individuals inside <span>.

HTML

<div class="col-lg-6">
                    <h4>Pesquisa por Nome</h4>
                    <input type="text" id="search-criteria" />
</div>

jQuery

$("#search-criteria").on("keyup", function () {
        var g = $(this).val().toLowerCase();
        var value = $.trim($("#search-criteria").val());
        if (value.length > 0) {
            $("span").each(function () {
                var s = $(this).text().toLowerCase();
                if (s.indexOf(g) != -1) {
                    $(this).parent().closest('.teste').show();
                }
                else {
                    $(this).parent().closest('.teste').hide();
                }
            });
        } else {
            $('.teste').hide();
        }
    });

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.