ToggleClass基於複選框狀態

所以我有一些導航由浮動在傳統錨點旁邊的表單複選框組成。如果沒有選中相應的複選框，我想添加一個類（基本上會調整樣式以調暗錨標記）。有系統地做這件事的最好方法是什麼？ToggleClass基於複選框狀態

<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 if($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>

來源

2011-04-12 Keefer

基於HTML

我會嘗試這個

$('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

來源

2011-04-12 16:12:24 mcgrailm

這個替換整個的if/else塊：'$（ '＃' + anchor_id）.toggleClass （'someclass'，$（this）.attr（'checked'））;'讓我們在這裏保持乾爽，人。 – 2011-04-12 16:22:23

@ adam-terlson良好的呼叫感謝 – mcgrailm 2011-04-12 16:51:13

嗯，一個小猴子扳手扔在這裏。另一塊jQuery攔截檢查的attrib（ez-checked）。我有'$''checkbox'）。change（function（）{ var anchor_id = $（this）.attr（'id'）。replace（'filter'，''）; $（' ＃'+ anchor_id）.toggleClass（'filtered'，$（this）.attr（'checked'））; }）'但toggleClass永遠不會觸發，因爲它沒有看到任何被視爲真的檢查。 – Keefer 2011-04-12 17:49:35

$(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" : ""); 
    }) 
})

來源

2011-04-12 16:37:05

ToggleClass基於複選框狀態

回答

相關問題