Custom Filter in JSLink

I have added a List View webpart in a page and attached a JSLink to it.The list contains 6000 items but I was able to handle it with pagination in JSLink. I want to create custom filter with checkboxes.On selection of each checkbox,I want to filter the List that is to repopulate the JSLink on each click on checkbox. Mutli select should work. 

Here is my full code of JSLink

window.BlogArchive = window.BlogArchive || {};
window.BlogArchive.Post = {
    customItemHtml: function (ctx) {
  var articleItemHtml ="<tbody><tr><td>" + ctx.CurrentItem.Title + "</td>";
  articleItemHtml +="<td>"+ ctx.CurrentItem.CompanyDescription +"</td>";
  articleItemHtml +="<td>"+ GetLookupValues(ctx.CurrentItem.Sectors, "lookupValue") +"</td>";
        return articleItemHtml;
    },
    pagingControl: function (ctx) {
        var firstRow = ctx.ListData.FirstRow;
        var lastRow = ctx.ListData.LastRow;
        var prev = ctx.ListData.PrevHref;
        var next = ctx.ListData.NextHref;
        var html = "</tbody></table></div><div class='Paging'>";
        html += prev ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled btn btn-default' href='" + prev + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
        html += "<span class='ms-paging'><span class='First'>" + firstRow + "</span> - <span class='Last'>" + lastRow + "</span></span>";
        html += next ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled btn btn-default' href='" + next + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
        html += "</div>";
        return html;
    },

};
function GetLookupValues(inputArry, originalColumnName)
{
    var retHtml = "";
    if (inputArry != null)
    {
        for (var loopcnt = 0; loopcnt < inputArry.length; loopcnt++) {
            if (typeof(inputArry[loopcnt][originalColumnName]) != 'undefined' && inputArry[loopcnt][originalColumnName] != null) {
                retHtml += inputArry[loopcnt][originalColumnName];
            }
        }
    }
    return retHtml;
}
// anonymous self-executing function to setup JSLink templates on page load..
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};


    //Tempate overrides
    overrideCtx.Templates.Header = "<script type='text/javascript' src='/mysites/SiteAssets/js/bootstrap.min.js'></script><link rel='stylesheet' href='/mysites/SiteAssets/css/bootstrap.min.css'><h1>Companies</h1><div class='table-responsive'><table class='table table-hover'><thead><th> Title </th><th> Company Description </th><th> Sectors </th></thead>";
    overrideCtx.Templates.Item = window.BlogArchive.Post.customItemHtml;
    overrideCtx.Templates.Footer = window.BlogArchive.Post.pagingControl;


    //BaseViewID = 1 means default View
    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 100;

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Please suggest me a solution.Thank you in Advance