Установка активного состояния флажков в зависимости от значения

Question

Я создаю фильтрующую систему, и я недавно начал использовать радио-ящики вместо простых кнопок. Проблема, которую я сейчас имею в виду, заключается в том, что я обновляю все состояния кнопок, когда пользователь нажимает кнопку, но кнопка, на которую они нажали, не активизируется. Если я нажму другую кнопку, он станет активным.

В целом, точно, как это плохо работает на моем фактическом сайте, это here.

JS и JQuery для установки активных кнопок и фильтров:

var filters = { 
    'period_months': [], 
    'period_years': [{filter_value: 2013, filter_display: "2013"}], 
    'period_quarters': [{filter_value: 1, filter_display: "Q1"}] 
}; 
draw(); 
$(".filter_toggle").click(function(e) { 
    var key = $(this).children('input').data('filterKey'); 
    var value = $(this).children('input').data('filterValue'); 
    var display = $(this).children('input').data('filterDisplay'); 
    if (key === "period_months") { 
     filters['period_years'] = []; 
     filters['period_quarters'] = []; 
    } else if ((key === "period_years") || (key === "period_quarters")) { 
     filters['period_months'] = []; 
    } 
    toggle(key,value,display); 
}); 
function toggle(filter_key,filter_value,filter_display) { 
    var filter_exists = false; 
    for (var i in filters[filter_key]) { 
     if (filters[filter_key][i]['filter_value'] == filter_value) { 
      filter_exists = true; 
      filters[filter_key].splice(i,1); 
      break; 
     } 
    } 
    var filter_in = { filter_value: filter_value, filter_display: filter_display }; 
    if (!filter_exists) { 
     filters[filter_key] = []; 
     filters[filter_key].push(filter_in); 
    } 
    draw(); 
} 
function draw() { 
    $('input').prop("checked",false).parent(".btn").removeClass("active").attr("aria-pressed",false); 

    for (i in filters) {  
     for (k in filters[i]) { 
      $("*[data-filter-key="+i+"][data-filter-value="+filters[i][k]['filter_value']+"]") 
      .prop("checked",true) 
      .parent(".btn") 
      .addClass("active") 
      .attr("aria-pressed",true); 
     } 
    } 
} 

В случае period_ * фильтров, один год и одна четверть может идти вместе. Если вы задали месяцы или диапазон, каждый другой период не установлен.

Все это работает отлично, когда я устанавливаю состояния при загрузке страницы, но не при нажатии нового фильтра. Остальная часть кода находится в скрипке, включая события кликов и т. Д.

Answer 1

Если я правильно понимаю, это может быть решение

UPDATE:

function clearMonths() { 
    $('#period_months .filter_toggle').removeClass('active'); 
    $('#period_months input').prop("checked", false) 
} 

function clearYears() { 
    $('#period_years .filter_toggle').removeClass('active'); 
    $('#period_years input').prop("checked", false) 
} 

function clearQuarters() { 
    $('#period_quarters .filter_toggle').removeClass('active'); 
    $('#period_quarters input').prop("checked", false) 
} 

$(".btn-group").click(function (e) { 

    if ($(this).attr('id') == 'period_months') { 
     clearYears() 
     clearQuarters() 
     clearMonths() 
    } 

    if ($(this).attr('id') == 'period_years') { 
     clearMonths(); 
     clearYears(); 
    } 

    if ($(this).attr('id') == 'period_quarters') { 
     clearMonths(); 
     clearQuarters() 
    } 

    $(this).find('label:active input').prop("checked", true); 


}); 

http://jsfiddle.net/25v4m6ue/5/