客户端搜索复选框值

Question

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

jsFiddle Example

示例：

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>

Answer 1

您可以使用.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()方法来选择输入后代。

Answer 2

试试这个

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

Answer 3

试试这个：

$("#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();}
            });

        }
});