Question

I would like to simplify this code and would love any suggestions.

Structure of the page:

• There are 10 different Sections.
• Each Section has a Question.
• Each Question has three Answers.
• Each Answer has a Checkbox.
• When the user checks a Checkbox, Feedback is shown for that specific Answer.
• When a user checks another checkbox, all other Answers and Checkboxes are reset.

I’ve created the functionally to make this work in three functions. One for each answer. To make this work for every section I need to create 30 functions. I’m sure there is an easier way, I’m just not sure where to start.

My code

// Action 1
$('.choice input.choice-a:checkbox').on('change', function(){
    $('.choice input:checkbox').attr('checked', false);
    $(this).attr('checked', true);
    hide_choices();
    $("#action-1 .mod3-6-1_choice_A .mod3-6-1_feedback").removeClass("screen-reader");
    $("#action-1 .mod3-6-1_choice_A .mod3-6-1_feedback").focus();
});
$('.choice input.choice-b:checkbox').on('change', function(){
    $('.choice input:checkbox').attr('checked', false);
    $(this).attr('checked', true);
    hide_choices();
    $("#action-1 .mod3-6-1_choice_B .mod3-6-1_feedback").removeClass("screen-reader");
    $("#action-1 .mod3-6-1_choice_B .mod3-6-1_feedback").focus();

});
$('.choice input.choice-c:checkbox').on('change', function(){
    $('.choice input:checkbox').attr('checked', false);
    $(this).attr('checked', true);
    hide_choices();
    $("#action-1 .mod3-6-1_choice_C .mod3-6-1_feedback").removeClass("screen-reader");
    $("#action-1 .mod3-6-1_choice_C .mod3-6-1_feedback").focus();
});
// Action 2
$('.choice input.choice-a:checkbox').on('change', function(){
    $('.choice input:checkbox').attr('checked', false);
    $(this).attr('checked', true);
    hide_choices();
    $("#action-2 .mod3-6-1_choice_A .mod3-6-1_feedback").removeClass("screen-reader");
    $("#action-2 .mod3-6-1_choice_A .mod3-6-1_feedback").focus();
});
$('.choice input.choice-b:checkbox').on('change', function(){
    $('.choice input:checkbox').attr('checked', false);
    $(this).attr('checked', true);
    hide_choices();
    $("#action-2 .mod3-6-1_choice_B .mod3-6-1_feedback").removeClass("screen-reader");
    $("#action-2 .mod3-6-1_choice_B .mod3-6-1_feedback").focus();

});
$('.choice input.choice-c:checkbox').on('change', function(){
    $('.choice input:checkbox').attr('checked', false);
    $(this).attr('checked', true);
    hide_choices();
    $("#action-2 .mod3-6-1_choice_C .mod3-6-1_feedback").removeClass("screen-reader");
    $("#action-2 .mod3-6-1_choice_C .mod3-6-1_feedback").focus();
});

The only thing different between Action 1 and Action 2 is the parent div that displays the feedback to the user.

Answer 1

One simple improvement would be to use radio buttons instead of checkboxes, and you could remove these lines:

$('.choice input:checkbox').attr('checked', false);
$(this).attr('checked', true);

Edit. Here’s how I would attempt this. The input elements would need data-action=”1″ and data-choice=”A” attributes.

$('.choice input').on('change', function(){
    var action = $(this).data('action');
    var choice = $(this).data('choice');

    $("#action-" + action).find(".mod3-6-1_choice_" + choice).find(".mod3-6-1_feedback").removeClass("screen-reader").focus();
});