Fatal编程技术网
  • javascript/
  • Javascript 我想将文本与我的动态复选框匹配

Javascript 我想将文本与我的动态复选框匹配

javascript c# jquery asp.net

Javascript 我想将文本与我的动态复选框匹配,javascript,c#,jquery,asp.net,Javascript,C#,Jquery,Asp.net,我想将文本与我的动态复选框匹配。这意味着如果我在文本框中写入H，那么它将显示所有包含H的复选框。这是我的代码，它适用于静态代码，但不适用于动态代码。请帮助我，我是jquery和java脚本的新手 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset="utf-8" /> <script type=

我想将文本与我的动态复选框匹配。这意味着如果我在文本框中写入H，那么它将显示所有包含H的复选框。这是我的代码，它适用于静态代码，但不适用于动态代码。请帮助我，我是jquery和java脚本的新手

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <script type="text/javascript">        $(function () {
            $('#chkfilter').on('keyup', function () {
                var query = this.value;

                $('[id^="chk"]').each(function (i, elem) {
                    if (elem.value.indexOf(query) != -1) {
                        $(this).closest('label').show();
                    } else {
                        $(this).closest('label').hide();
                    }
                });
            });

        });</script>
    <style>
        input
        {
            display: inline;
        }
    </style>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <label>
        <input type="checkbox" name="chk" id="chk1" value="casual">casual</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk2" value="intermediate">intermediate</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk3" value="hunter">hunter</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk4" value="forest">forest</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk5" value="term">extreme</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk6" value="river">river</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk7" value="beach">beach</label><br>
    <br>
    <br>
    <input type="text" id="chkfilter">


$（函数（）{
$（'#chkfilter'）。on（'keyup'，function（）{
var query=this.value；
$（'[id^=“chk”]'）。每个（函数（i，元素）{
if（elem.value.indexOf（查询）！=-1）{
$（this）.closest（'label'）.show（）；
}否则{
$（this）.closest（'label'）.hide（）；
}
});
});
});
输入
{
显示：内联；
}
随意的

中级

猎人

森林

极端的

河流

海滩
静态代码

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <script type="text/javascript">
            $(function () {
            $('#chkfilter').on('keyup', function () {
                var query = this.value;

                $('[id^="list"]').each(function (i, elem) {
                    if (elem.value.indexOf(query) != -1) {
                        $(this).closest('label').show();
                    } else {
                        $(this).closest('label').hide();
                    }
                });
            });

        });
    </script>
    <style>
        input
        {
            display: inline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <label>
        <ul id="list" runat="server" style="list-style-type: none;">
        </ul>
        </label>
        <div id="filters" runat="server">
        </div>
        <input type="text" id="chkfilter">
    </div>


protected void Page_Load(object sender, EventArgs e)
    {
        fillcolor();

    }
    public void fillcolor()
    {
        string str = string.Empty;
        string str1 = string.Empty;
        string result = string.Empty;
        clsColor objcolor = new clsColor(true);
        clsColorProduct objProduct = new clsColorProduct(true);
        objcolor.getColor();
        for (int i = 0; i < objcolor.ListclsColor.Count; i++)
        {
            str += "<li><div class='filterblock'><input type='checkbox' id=" + objcolor.ListclsColor[i].ColorID + " name='chk' value=" + objcolor.ListclsColor[i].ColorName + " class='category'><div class='font'><div class='Color' style=background-color:" + objcolor.ListclsColor[i].ColorCode + "></div></div><label  class='font' for=" + objcolor.ListclsColor[i].ColorID + ">" + objcolor.ListclsColor[i].ColorName + "</label></div></li>";
            if (objcolor.ListclsColor[i].ColorID != 0)
            {
                str1 += "<td><div class='resultblock' ColorID=" + objcolor.ListclsColor[i].ColorID + " data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + objcolor.ListclsColor[i].ColorName + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>";
                objProduct.getColorp();
                for (int j = 0; j < objProduct.ListclsColorProduct.Count; j++)
                {

                }
            }
        }
        list.InnerHtml = str;
        filters.InnerHtml = result;
        // sugg.InnerHtml = str1;
    }
}
当我将其转换为动态时，复选框将显示其值，但当我尝试匹配它时，复选框不起作用

动态代码

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <script type="text/javascript">
            $(function () {
            $('#chkfilter').on('keyup', function () {
                var query = this.value;

                $('[id^="list"]').each(function (i, elem) {
                    if (elem.value.indexOf(query) != -1) {
                        $(this).closest('label').show();
                    } else {
                        $(this).closest('label').hide();
                    }
                });
            });

        });
    </script>
    <style>
        input
        {
            display: inline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <label>
        <ul id="list" runat="server" style="list-style-type: none;">
        </ul>
        </label>
        <div id="filters" runat="server">
        </div>
        <input type="text" id="chkfilter">
    </div>


protected void Page_Load(object sender, EventArgs e)
    {
        fillcolor();

    }
    public void fillcolor()
    {
        string str = string.Empty;
        string str1 = string.Empty;
        string result = string.Empty;
        clsColor objcolor = new clsColor(true);
        clsColorProduct objProduct = new clsColorProduct(true);
        objcolor.getColor();
        for (int i = 0; i < objcolor.ListclsColor.Count; i++)
        {
            str += "<li><div class='filterblock'><input type='checkbox' id=" + objcolor.ListclsColor[i].ColorID + " name='chk' value=" + objcolor.ListclsColor[i].ColorName + " class='category'><div class='font'><div class='Color' style=background-color:" + objcolor.ListclsColor[i].ColorCode + "></div></div><label  class='font' for=" + objcolor.ListclsColor[i].ColorID + ">" + objcolor.ListclsColor[i].ColorName + "</label></div></li>";
            if (objcolor.ListclsColor[i].ColorID != 0)
            {
                str1 += "<td><div class='resultblock' ColorID=" + objcolor.ListclsColor[i].ColorID + " data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + objcolor.ListclsColor[i].ColorName + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>";
                objProduct.getColorp();
                for (int j = 0; j < objProduct.ListclsColorProduct.Count; j++)
                {

                }
            }
        }
        list.InnerHtml = str;
        filters.InnerHtml = result;
        // sugg.InnerHtml = str1;
    }
}


$（函数（）{
$（'#chkfilter'）。on（'keyup'，function（）{
var query=this.value；
$（'[id^=“list”]'）。每个（函数（i，元素）{
if（elem.value.indexOf（查询）！=-1）{
$（this）.closest（'label'）.show（）；
}否则{
$（this）.closest（'label'）.hide（）；
}
});
});
});
输入
{
显示：内联；
}

    


受保护的无效页面加载（对象发送方、事件参数e）
{
fillcolor（）；
}
公共空白填充颜色（）
{
string str=string.Empty；
string str1=string.Empty；
字符串结果=string.Empty；
clsColor OBJCLOR=新clsColor（真）；
clsColorProduct OBJPProduct=新的clsColorProduct（真）；
getColor（）；
for（int i=0；i”+objcolor.ListclsColor[i].ColorName+””；
if（objcolor.ListclsColor[i].ColorID！=0）
{
str1+=“”+objcolor.ListclsColor[i].ColorName+“”；
objProduct.getColorp（）；
对于（int j=0；j
您可以将复选框包装在一个容器中，使用该容器的ID获取所有复选框

<div id="checkBoxList">
    <label>
        <input type="checkbox" name="chk" id="chk1" value="casual">casual</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk2" value="intermediate">intermediate</label><br>
</div>
对此

$('#checkBoxList input[type="checkbox"]').each(function (i, elem) {
Ps函数不再工作的原因是
objcolor.ListclsColor[i].ColorID
可能不包含
chk

您可以将复选框包装在容器中，使用该容器的ID获取所有复选框

<div id="checkBoxList">
    <label>
        <input type="checkbox" name="chk" id="chk1" value="casual">casual</label><br>
    <label>
        <input type="checkbox" name="chk" id="chk2" value="intermediate">intermediate</label><br>
</div>
对此

$('#checkBoxList input[type="checkbox"]').each(function (i, elem) {
Ps函数不再工作的原因是，
objcolor.ListclsColor[i].ColorID
可能不包含
chk

Sooo。。。搜索？是的有点像这样。。。搜索？是的，有点像这样。我的代码片段是为这两个目的编写的。只需使用div包装动态代码并更改javascript即可。如果（elem.value.indexOf（query）！=-1）{$（this.closest（'label'）.show（）；}否则{$（this.closest（'label'）.hide（）；}）；}）；检查其他html标记。在
    • 之间的
    之前使用
    。这没有道理。您有动态生成的HTML的示例吗？我的代码段适用于两者。只需使用div包装动态代码并更改javascript即可。如果（elem.value.indexOf（query）！=-1）{$（this.closest（'label'）.show（）；}否则{$（this.closest（'label'）.hide（）；}）；}）；检查其他html标记。在
    • 之间的
    之前使用
    。这没有道理。您有动态生成的HTML的示例吗？