Question

I wrote a script that shows/hides a div depending on which checkbox is selected. The code I wrote below works fine, but…

Is there a way to shorten this code, without having to repeat the if/else statement for each additional checkbox/div I will need to add?

$(function() {
    $("#submit_button").click(function(){
        if ($("input[value='poster1']:checked").val()){
            $("#results1").show();
        }
        else {
            $("#results1").hide();
        }
        if ($("input[value='poster2']:checked").val()){
            $("#results2").show();
        }
        else {
            $("#results2").hide();
        }
        if ($("input[value='poster3']:checked").val()){
            $("#results3").show();
        }
        else {
            $("#results3").hide();
        }

});

Answer 1

$("#submit_button").click(function() {
    $('input').each(function(i,el){
        var $el = $(el),
            num = $el.val().match(/poster(\d*)/)[1];
        if ($el.filter(':checked').length) {
            $('#results'+num).show();
        } else {
            $('#results'+num).hide();
        }
    });
});

Demo →