客户端搜索复选框值

Client-side searching in checkbox value

本文关键字：复选框 搜索 客户端      更新时间：2023-12-18

我需要帮助。。现在我正在尝试创建一个客户端搜索，但我不知道如何比较输入文本和复选框中的值。

jsFiddle示例

示例：

jQuery("#searchBox").on("keyup paste", function() {
    var value = jQuery(this).val().toUpperCase();
    var rows = jQuery(".sp_country");
        rows.hide();
        if(value === '') {
            rows.show();
            return false;
        } 
   //need something here to compare values on checkboxes and show does checkedbox who match
});

这是我位于的复选框

<span class="sp_country">
    <input class="cp_country" style="cursor:pointer; display:none;" type="checkbox" name="country" value="Afghanistan">&nbsp;Afghanistan    
</span>

您可以使用.filter()方法：

rows.filter(function() {
   return $(this).text().toUpperCase().indexOf(value) > -1;
}).show();

或者，如果您想将输入与复选框的值进行比较：

rows.filter(function(){
   return this.children[0].value.toUpperCase().indexOf(value) > -1;
}).show();

您也可以使用jQuery的.find()方法来选择输入子体。

试试这个

$("cp_country").each(function(){
    if($(this).val()==("#searchBox").val()){
        $(this).parent(".sp_country").show();
    }
});

整个想法是：

 iterate through each of the checkbox value
 if the value matches with search box value then
   show the parent span element

试试这个：

$("#searchBox").on("keyup paste", function() {
    var value = $(this).val().toUpperCase();
    var rows = $(".cp_country");
        rows.hide();
        if(value === '') {
            rows.show();
            return false;
        }
        else{
            rows.each(function(){
               if($(this).val().toUpperCase().indexOf(value) != -1){
                  $(this).show();
               }
               else{ $(this).hide();}
            });
        }
});
相关文章：