lundi 12 juin 2017

iCheck jQuery search filtering

I have some code: 1) list of checkboxes

<div class="list_box">
                                <dl>
                                <dt><span>FORM-FACTOR</span></dt>
                                <dd>
                                    <ul>
                                        <li><label><div class="icheckbox_minimal" style="position: relative;"><input class="chk_all" type="checkbox" name="cateChk_0_all" value="f_all" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>Select All</label></li>
                                        <li class=""><label><div class="icheckbox_minimal" style="position: relative;"><input type="checkbox" value="air" name="cateChk_0_arr" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>AAA</label></li>
                                        <li class=""><label><div class="icheckbox_minimal" style="position: relative;"><input type="checkbox" value="humidi" name="cateChk_0_arr" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>BBB</label></li>
                                        <li class=""><label class=""><div class="icheckbox_minimal checked" style="position: relative;"><input type="checkbox" value="dehumidi" name="cateChk_0_arr" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>CCC</label></li>

                                    </ul>
                                </dd>
                            </dl>
                            <dl>
                                <dt><span>TYPES</span></dt>
                                <dd>
                                    <ul>
                                        <li><label><div class="icheckbox_minimal" style="position: relative;"><input class="chk_all" type="checkbox" name="cateChk_1_all" value="t_all" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>Select All</label></li>
                                        <li class=""><label class=""><div class="icheckbox_minimal checked" style="position: relative;"><input type="checkbox" value="less_33" name="cateChk_1_arr" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>TYPE_1</label></li>
                                        <li class="type_w1"><label><div class="icheckbox_minimal" style="position: relative;"><input type="checkbox" value="betw33_66" name="cateChk_1_arr" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>TYPE_2</label></li>
                                        <li class=""><label><div class="icheckbox_minimal" style="position: relative;"><input type="checkbox" value="more_66" name="cateChk_1_arr" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>TYPE_3</label></li>

                                    </ul>
                                </dd>
                            </dl>

                            <div class="btn_search"><a href="#" type="submit"> Search</a></div>
                        </div>

2) and list of goods:

<ul class="thumb_list">
                    <li class="thumb_1 flower" data-category="">
                        <a href="www.link_1.com">
                            <div class="txt_box">
                                <div class="p_info">
                                    <span class="p_number"> Product#1 </span>
                                    <span class="title1">Product#1 description </span>
                                </div>
                                <div class="p_icon">
                                    <span class="ico_a a1"><em></em>some data</span>

                                </div>

                            </div>
                        </a>
                    </li>
                                           <li class="thumb_2 flower" data-category="">
                        <a href="www.link_2.com">
                            <div class="txt_box">
                                <div class="p_info">
                                    <span class="p_number"> Product#2 </span>
                                    <span class="title1">Product#2 description </span>
                                </div>
                                <div class="p_icon">
                                    <span class="ico_a a1"><em></em>some data</span>

                                </div>

                            </div>
                        </a>
                    </li>
                                          <li class="thumb_n flower" data-category="">
                        <a href="www.link_n.com">
                            <div class="txt_box">
                                <div class="p_info">
                                    <span class="p_number"> Product#n </span>
                                    <span class="title1">Product#n description </span>
                                </div>
                                <div class="p_icon">
                                    <span class="ico_a a1"><em></em>some data</span>

                                </div>

                            </div>
                        </a>
                    </li>

And I use iCheck http://ift.tt/1VqAPUw. So I need to show only checked products by FORM-FACTOR or TYPES filtering (using cklick the button "Search")

Also I have a script - but it not work with iCheck. Could you help me please to make live filterring?




Aucun commentaire:

Enregistrer un commentaire