ToggleClass 基于复选框状态答案

【问题标题】：ToggleClass Based on checkbox statusToggleClass 基于复选框状态
【发布时间】：2011-04-12 16:02:17
【问题描述】：

所以我有一些导航，其中包含浮动在传统锚点旁边的表单复选框。如果未选中相应的复选框，我想添加一个类（基本上将设置为使锚标记变暗）。系统地执行此操作的最佳方法是什么？

<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>

【问题讨论】：

标签： jquery css forms

【解决方案1】：

基于 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

【讨论】：

用这个替换你的整个 if/else 块：$('#'+anchor_id).toggleClass('someclass', $(this).attr('checked')); 让我们在这里保持干燥，人们。
嗯，这里扔了一个小猴子扳手。 jQuery 的另一部分是拦截已检查的属性（ez-checked）。我有这个 '$('.checkbox').change(function(){ var anchor_id = $(this).attr('id').replace('filter',''); $('#' +anchor_id).toggleClass('filtered', $(this).attr('checked')); })' 但是toggleClass永远不会触发，因为它没有看到检查为真。
@Keefer 我更新了选择器和事件以避免跳跃性冲突
@mcgrailm 感谢您的帮助。这是一种工作。我把它作为我的代码$('input:checkbox').change(function(){ var anchor_id = $(this).attr('id').replace('filter','').toLowerCase();; $('#'+anchor_id+'Link').toggleClass('dim', $(this).attr('checked')); }) 但它没有查看复选框的初始状态。它需要关闭然后打开才能添加类。
@Keefer 你的意思是它没有在开始时设置它们吗？或者当您在启动时设置它们时它会中断？

【解决方案2】：

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

【讨论】：