ToggleClass Based on checkbox status
So I've got some nav that consists of form checkboxes floated next to a traditional anchors. If the corresponding checkbox is not checked, I want to add a class (that basically will be styled to dim the anchor tag). What's the best way to do this systematically?
<div id="navPod">
<form method="post" action="#" id="contentFilterForm" name="contentFilterForm">
<input type="hidden" name="q" value="<?php echo $q;?>" />
<input class="checkbox" type="checkbox" <?php if($pagetype == 'home'){ echo "checked=\"checked\"";} if($pagetype == 'projects'){ echo "checked=\"checked\"";} if($proj){ echo "checked=\"checked\"";} ?> name="pr" value="1" id="filterProjects" />
<input class="checkbox" <?php if($pagetype == 'home'){ echo "checked=\"checked\"";} if($pagetype == 'playground'){ echo "checked=\"checked\"";} if($playground){ echo "checked=\"checked\"";} ?> type="checkbox" name="pl" value="1" id="filterPlayground" />
<input class="checkbox" type="checkbox" <?php if($pagetype == 'home'){ echo "checked=\"checked\"";} if($pagetype == 'about'){ echo "checked=\"checked\"";} if($culture){ echo "checked=\"checked\"";} ?> name="cu" value="1" id="filterCulture" />
<input class="checkbox" type="checkbox" <?php if($pagetype == 'home'){ echo "checked=\"checked\"";} if($pagetype == 'leadership'){ echo "checked=\"checked\"";} if($leadership){ echo "checked=\"checked\"";} ?> name="le" value="1" id="filterLeadership" />
<input class="checkbox" type="checkbox" <?php if($pagetype == 'home'){ echo "checked=\"checked\"";} if($pagetype == 'careers'){ echo "checked=\"checked\"";} if($jobs){ echo "checked=\"checked\"";} ?> name="ca" value="1" id="filterCareers" />
<input class="checkbox" <?php if($pagetype == 'home'){ echo "checked=\"checked\"";} if($pagetype == 'blog'){ echo "checked=\"checked\"";} if($blog){ echo "checked=\"checked\"";} ?> type="checkbox" name="bl" value="1" id="filterBlog" />
<input class="checkbox" <?php if($pagetype == 'home'){ echo "checked=\"checked\"";} if($pagetype == 'delicious'){ echo "checked=\"checked\"";} if($links){ echo "checked=\"checked\"";} ?> type="checkbox" name="li" value="1" id="filterDelicious" />
<input id="refreshSubmit" type="button" value="" onclick="createURLS()"/>
</form>
<div class="subnav">
<a id="projectsLink" title="Projects" href="/projects/" <?php if($pagetype == 'projects'){ echo "class=\"currentPage\""; } ?> >Projects</a><br />
<a id="playgroundLink" title="Playground" href="/playground/" <?php if($pagetype == 'playground'){ echo "class=\"currentPage\""; } ?> >Playground</a><br />
<a id="aboutLink" title="About Centerline Digital" href="/about/" <?php if($pagetype == 'about'){ echo "class=\"currentPage\""; } ?> >About Us</a><br />
<a id="leadershipLink" title="Leadership" href="/leadership/" <?php if($pagetype == 'leadership'){ echo "class=\"currentPage\""; } ?> >Leadership</a><br />
<a id="careersLink" title="Careers" href="/careers/" <?php if($pagetype == 'careers'){ echo "class=\"currentPage\""; } ?> >Careers</a><br />
<a id="blogLink" title="Blog" href="/blog/" <?php if($pagetype == 'blog'){ echo "class=\"currentPage\""; } ?> >Blog</a><br />
<a id="thoughtsLink" title="Thoughts and Links" href="/thoughts/" <?php i开发者_如何学Cf($pagetype == 'delicious'){ echo "class=\"currentPage\""; } ?> >Thoughts and Links</a><br />
<a target="_blank" title="Subscribe to Custom Feed" id="feedLink" href="/dyn/">Subscribe to Custom Feed</a>
</div>
</div>
based on the html I would try this
$('input:checkbox').each(function(){
var anchor_id = $(this).attr('id').replace('filter','').toLowerCase();;
$('#'+anchor_id+'Link').toggleClass('someclass', $(this).attr('checked'));
});
$('input:checkbox').change(function(){
var anchor_id = $(this).attr('id').replace('filter','').toLowerCase();;
$('#'+anchor_id+'Link').toggleClass('someclass', $(this).attr('checked'));
})
working demo
$(function(){
$("a[id$='Link']").each(function(){
var checkboxID = this.id.replace("Link", "");
checkboxID = "filter" + checkboxID[0].toUpperCase() + checkboxID.substr(1);
$(this).addClass($("#" + checkboxID).is(":checked") ? "dim" : "");
})
})
精彩评论