Jquery对checkbox搜索的实现

news/2024/7/11 1:05:05 标签: js, jquery, 模糊搜索, checkbox, label

checkboxlabel组成的选项由于checkboxlabel是两个单独的元素,所以在对其进行搜索得时候,样式会出现一些问题,比如将lable的值和输入框输入的值做比较,如果label中存在input输入的元素则显示labelcheckbox
常用的做法则不存在的label会被隐藏但checkbox还是会显示,而且由于td和tr样式的要求,会出现断层,不联系显示。所以对此的处理办法如下

  function Search() {
        //得到输入框输入的值
            var filter = document.getElementById("inputValueID").value.toUpperCase();
            //得到选项中的label标签
            var values = $("#Search label");
            //得到checkbox标签
            var check = $("#Search input");
            var length = values.length;
            for (var i = 0; i < length; i++) {
                //如果字符串不存在则返回-1,反之则表示存在
                if (values[i].innerHTML.toUpperCase().indexOf(filter) != -1) {
                    values[i].style.display = " ";
                } else {
                    //不存在的元素则直接remove
                    values[i].remove();
                    check[i].remove();
                }
            }
            if (filter.length == 0) {
                //并且当搜索值为空的时候局部刷新,重新显示所以的选项,注意 #Search前面有个空格不然会报错
                $("#Search").load(location.href + " #Search");
            }

        }

 


http://www.niftyadmin.cn/n/625522.html

相关文章

label设置宽度无效的原因以及处理方式【内联元素和块级元素总结】

今天在写前端代码的时候给label标签设置宽度&#xff0c;代码如下 <label class"label" style"color: red;width: 200px ;height: 20px;line-height: 20px;text-align: center;border-radius: 10px; font-size: 12px;"></label> 结果在前端…

JAVA中代码的执行顺序

究竟在JAVA中代码的值行顺序是怎么样的呢&#xff1f; 接下来俺就通过实例来讲讲吧&#xff01; 以下是父类代码&#xff1a; public class Parent {static{//静态代码块System.out.println("父类的静态代码块");}{System.out.println("父类的代码块");//…

页面自动加载js的方法

一、前言 公司有个项目里面有搜索功&#xff0c;根据多个搜索框的条件来进行搜索&#xff0c;产品提了个需求&#xff0c;需要对其中的一个搜索框加一个提示&#xff0c;比如用红色字体&#xff0c;要求对该输入框的搜索字数不能超过5个字符&#xff0c;然后看了一圈&#xff0…

单例模式|

单例模式是一种常用的软件设计模式&#xff0c;其定义是单例对象的类只能允许一个实例存在。 许多时候整个系统只需要拥有一个的全局对象&#xff0c;这样有利于我们协调系统整体的行为。比如在某个服务器程序中&#xff0c;该服务器的配置信息存放在一个文件中&#xff0c;这…

工厂模式O(∩_∩)O

工厂模式是我们最常用的实例化对象模式了&#xff0c;是用工厂方法代替new操作的一种模式。著名的Jive论坛 ,就大量使用了工厂模式&#xff0c;工厂模式在Java程序系统可以说是随处可见。因为工厂模式就相当于创建实例对象的new&#xff0c;我们经常要根据类Class生成实例对象&…

Js中Promise用法

promise是用来解决Js中的异步问题的。基本结构如下&#xff1a; function a() {return new Promise((resolve, reject) > {//dosomethingresolve() } } 前提是要通过新建一个Promise的对象&#xff0c;然后传参一个函数&#xff08;resolve,reject&#xff09;>{resolve…

哈希冲突^_^

哈希冲突产生的原因 哈希是通过对数据进行再压缩&#xff0c;提高效率的一种解决方法。但由于通过哈希函数产生的哈希值是有限的&#xff0c;而数据可能比较多&#xff0c;导致经过哈希函数处理后仍然有不同的数据对应相同的值。这时候就产生了哈希冲突。 简单说就是&#xff…

jquery获取父级元素、同级元素以及子元素的方法

有文件的结构如下&#xff1a; <div class"level-1"><tr class"tr1"><td class"td1">1</td><td class"td2">2</td><td class"td3">3</td><td class"td4">…