Question

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

$.ajax({
        type: "post",
        url: url1,
        data: data1,
        success: function(data){                
            $.ajax({
                type: "post",
                url: url2,
                data: data2,
                success: function(data){

            });
        });
});

静态代码

当我将其转换为动态复选框时，会显示其值，但是当我尝试将其匹配时无法正常工作

动态代码

 <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">

Answer 1

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

<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>

然后从此

更改JavaScript中的行

$('[id^="chk"]').each(function (i, elem) {

到这个

$('#checkBoxList input[type="checkbox"]').each(function (i, elem) {

Ps你的功能不再起作用的原因是objcolor.ListclsColor[i].ColorID可能不包含chk

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

1 个答案: