Help condensing jQuery code
I've got a page set up where there are a number of options in a number of sections presented to the user. The user needs to select one item from each section. Each option has a checkbox and I've used a jQuery click function to check the checkbox if the related image is clicked on. The image is also highlighted when clicked on. This is the code:
-
$(document).ready(function(){
$(".featureBox1 li").click( function(){
$(".featureBox1 li").removeClass('selected');
$(this).addClass('selected');
$(this).children("input").attr("checked", true);
});
$(".featureBox2 li").click( function(){
$(".featureBox2 li").removeClass('selected');
$(this).addClass('selected');
$(this).children("input").attr("checked", true);
});
$(".featureBox3 li").click( function(){
$(".featureBox3 li").removeClass('selected');
$(this).addClass('selected');
$(this).children("input").attr("checked", true);
});
$(".featureBox4 li").click( function(){
$(".featureBox4 li").removeClass('selected');
$(this).addClass('selected');
$(this).children("input").attr("checked", true);
});
$(".featureBox5 li").click( function(){
$(".featureBox5 li").removeClass('selected');
$(this).addClass('selected');
$(this).children("input").attr("checked", true);
});
$(".featureBox6 li").click( function(){
$(".featureBox6 li").removeClass('selected');
$(this).addClass('selected');
$(this).children("input").attr("checked", true);
});
});
So I've got the same code 6 times as the 'selected' class was being removed from items I wanted to keep it on. Now I know there must be a way to condense this into 1 click function, maybe with a javascript loop, increasing the .featureBox number by 1 each time? Any help much appreciated. Many thanks