HTML：其他搜索过滤器控件

Question

I am using Node.js as a backend and JQuery as a frontend and I have a search box with filters as checkboxes below it see the next image Now when I click on the filter it will be added to a used filter list also provided as an image

Then when i click on the x next to the filter it will be deleted and also unchecked. all of the prev things are working in the next code:

$('[id^="facet-"]').on('change',function(){
        let xMark = '<i id="'+$(this).attr('id')+'-remove-filter" class="fa fa-times-circle" aria-hidden="true"></i>'
        let key = $(this).data('key')
        let keyVal = '<div id="'+$(this).attr('id')+'-span" class="btn"><span>'+$(this).data('key')+ ' > ' +$(this).data('value')+'</span>'+xMark+'</div>'
        if($(this).is(':checked')){
            $('.'+key+'-filters').append(keyVal)
        }else{
            $('#'+$(this).attr('id')+'-span').remove()
        }
        $('i[id$="-remove-filter"]').on('click',function(){
            let checkboxId = $(this).attr('id').split('-remove-filter')[0]
            $('#'+checkboxId).prop('checked', 0)
            $(this).parent().remove()
        })
    })

As I said it's working and good so far, what should happen next is when you click on search it will take all checkboxes and post them to get some search results (this is also working since I surrounded the page with one form.

What I need is when the filters set has at least one checkbox inside it to be bordered like the next photo

I did this using the following piece of code:

$('[aria-controls="'+$(this).data('key')+'-facets"]').addClass('has-selected')

This will keep it bordered whenever some filter has been selected once and I can remove the border using

$('[aria-controls="'+$(this).data('key')+'-facets"]').removeClass('has-selected')

Here I have couple of questions

• how to keep the border as long as there is at least one selected checkbox and remove it only when there are 0 selected? please note that there is more than one filters set!
• I think this could be some sort of a library for people to use (with some adjustments of course). Where do I start with this?
• Is there any better to apply this whole procedure? adding a filter , removing the checkbox?

Answer 1

Let me know if this works, I sadly can't test it:

$('[id^="facet-"]').on('change',function(){
        var id = $(this).attr('id')
        var key = $(this).data('key')
        var value = $(this).data('value')
        if($(this).is(':checked')){
            let xMark = $('<i id="'+id+'-remove-filter" class="fa fa-times-circle" aria-hidden="true"></i>')
            let keyElement = $('<div id="'+id+'-span" class="btn"><span>'+key+ ' > ' +value+'</span></div>')
            $('.'+key+'-filters').append(keyElement)
            keyElement.append(xMark)
            xMark.bind('click',function(){
                let checkboxId = id.split('-remove-filter')[0]
                $('#'+checkboxId).prop('checked', 0).change()
                // adding the change() method here will trigger the event all over again to control adding/removing class
                $(this).parent().remove()
            })
        }else{
            $('#'+id+'-span').remove()
        }
        var panel = $('[aria-controls="'+key+'-facets"]')
        var checked_num = panel.find('input[type=checkbox]:checked').length
        if(checked_num>0)
            panel.addClass('has-selected')
        else
            panel.removeClass('has-selected')
    })