Question

My code works, but I’d like to clean it up and possibly reuse it instead of copying it.

I have a select box with each value selected checking or unchecking a group of checkboxes based on their class tag.

Is it possible to pass the class name .task_mod to a function where the following

$('.inside_border a.task_mod :checkbox').attr('checked', true);
$('.inside_border a.task_mod').css("background-color","#9dc6f4");
$('.inside_border a.task_mod').css("color","#fff");

can all be applied? That way, I can use this function for all the other checkboxes like so

check_mod(“.links_mod”);

$('[name="workspace_type"]').change(function()
    {
        if($(this).val() == "0")
        {
            $('.inside_border a :checkbox').attr('checked', false);
            $('.inside_border a').css("background-color","#dfdfdf");
            $('.inside_border a').css("color","#6e6d6d");
        }
        else if($(this).val() == "small_biz")
        {
            $('.inside_border a.task_mod :checkbox').attr('checked', true);
            $('.inside_border a.task_mod').css("background-color","#9dc6f4");
            $('.inside_border a.task_mod').css("color","#fff");
        }
    });

The Selectbox

<select name="workspace_type">
                                    <option value="0">select please</option>
                                    <option value="small_biz">Small Business</option>
                                    <option value="freelance">Freelancer</option>
                                    <option value="startup">Startup Company</option>
                                    <option value="small_team">Small Team</option>
                                    <option value="academic">Academic</option>
                                    <option value="media">Media Organization</option>
                                    <option value="personal">Personal</option>
                                </select>

The checkboxes

<div class="inside_border">
<a href="#" class="task_mod"><input type="checkbox" name="add_mod"/>Tasks</a>
<a href="#" class="docs_mod"><input type="checkbox" />Documents</a>
<a href="#" class="discuss_mod"><input type="checkbox" />Discussions</a>
<a href="#" class="links_mod"><input type="checkbox" />Links</a>
<a href="#" class="images_mod"><input type="checkbox" />Images</a>
<a href="#" class="customer_mod"><input type="checkbox" />Customers</a>
<a href="#" class="project_mod"><input type="checkbox" />Projects</a>
<a href="#" class="members_mod"><input type="checkbox" />Members</a>
</div>

If you don’t understand, I can explain.
P.S. I know I should use Id(s) for the checkboxes but…

Answer 1

create this function:

function check_mod($target){
    $target.css({
        "background-color": "#9dc6f4",
        "color":"#fff"
    })
    .find(":checkbox").attr('checked', true);
}

and than use like this:

check_mod($('.inside_border a.task_mod'));