CODEWITHSUNDEEP
jquerytwitter-bootstrap
vcanales
vcanales

Reputation: 1828

Setting active status of checkboxes depending on value

i'm creating a filtering system and I recently started using radio boxes instead of just buttons. The problem I have right now is that I'm refreshing all the button states when the user clicks on a button, but the button they actually clicked doesn't become active. If I click another button it does become active.

The whole thing, exactly how it misbehaves on my actual site, is here.

JS and jQuery for setting active buttons and filters:

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);
        }
    }
}

In the case of period_* filters, one year and one quarter can go together. If you set months or range, every other period is unset.

All of the above works fine when I set the states on page load, but doesn't when I click a new filter. The rest of the code is in the fiddle, including on click events and such.

Upvotes: 0

Views: 84

Answers (1)

dm4web
dm4web

Reputation: 4652

If I understand correctly, this could be the solution

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/

Upvotes: 1

Related Questions