Need this to be a generic function...
I needed to create a graphical version of a filtration form that creates hidden fields when the user selects certain elements as well as have a "select all" option, so here's bit I wrote and i need it to be able to work on multiple parts of the same page.
The problem is that I couldn't figure out how to target the "cousin" element generically(this.parent.sibling.child...???), so I went with the ID, but now I need it in more than one spot on the page...argh!
Any ideas would be super helpful!
script:
-
//select all checkbox. need to create a universal function for this
$('input#allindoorpubplaces').attr('checked', false);
$('#allindoorpubplaces').click(function(){
if($(this).is(':checked'))
//
{
//this stops the redundant creation of the hidden field
$('ul.indoorpubplaces li a').siblings('.checkme').remove();
//this creates all hidden fields and changes all buttons to 'selected'
$('ul.indoorpubplaces li a')
.addClass('selected')
.after('<input type="hidden" name="" value="" class="checkme" />');
} else {
//remove 'selected' class
$('ul.indoorpubplaces li a')
.removeClass('selected')
// and remove all fields
$('ul.indoorpubplaces li a').siblings('.checkme').remove();
}
//give the hidden fields their respective values
$('ul.indoorpubplaces li a').each(function(index){
$(this).siblings('.checkme').val(this.text);
});
});
// this is the function for each individual button
$("ul.indoorpubplaces a").click(function () {
if (this.className == 'selected') {
// remove input if it's there
$(this).siblings('.checkme').remove();
} else {
//add input
$(this).after('<input type="hidden" name="" value="" class="checkme" />');
//with a value of the linked text
$(this).siblings('.checkme').val(this.text);
}
//toggle the classname of the link
$(this).toggleClass("selected");
// uncheck the "All" checkbox
$('input#allindoorpubplaces').attr('checked', false);
return false;
});
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML:
-
<div class="subcats">
<p class="topcategory">
<a href="#">Indoor Work Places</a>
</p>
<div class="checkemall"><input type="checkbox" name="allindoorworkplaces" id="allindoorworkplaces" value="all indoor work places" /><label for="allindoorpubplaces">(All)</label></div>
<div class="optionalsubs">
<p class="small">Optional sub-categories</p>
<ul class="indoorworkplaces">
<li><a href="#" id="hospitals">Hospitals</a>
</li>
<li><a href="#">Other Non-Residential Health Care Facilities</a>
</li>
<li><a href="#">Primary/Secondary Education Facilities</a>
</li>
<li><a href="#">University/Vocational Faciilities</a>
</li>
</ul>
</div><!-- /.optionalsubs -->
</div><!-- /.subcats -->
I got the checkbox figured out, but it's the ("ul>li>a")'s that i need a generic way to target the checkbox if the user deselects them after it does its "select all" magic.
I hope that's somewhat clear...