如果单击，则切换复选框选中/取消选中答案

【问题标题】：Toggle checkboxes checked/unchecked if click on如果单击，则切换复选框选中/取消选中
【发布时间】：2013-12-11 09:33:03
【问题描述】：

我有一个包含列表项的 ul。单击列表项时，它的类变为活动的。这就是我所拥有的。

$("#verlanglijst ul li").on('click', function() {
   var activiteit = $(this).attr("class");
   $(this).toggleClass('active');       
});

list-list 项是在 wordpress 中使用循环创建的。 Wordpress 还创建与列表项一样多的复选框。

<?php $activiteiten = new WP_Query("post_type=activiteiten&showposts=-1"); while($activiteiten->have_posts()) : $activiteiten->the_post();?>
    <input class="post-<?php echo $post->ID; ?> checkbox"  type="checkbox" />
<?php $count++; endwhile; wp_reset_query(); ?>

我没有得到的是以下内容：单击一个项目时，该类将变为活动状态。这样可行。但我还想要的是，如果 li-item 的类设置为活动，则将 li-item 的复选框设置为检查。并且当移除活动类时，必须取消选中该复选框。

也许你可以帮助我；）

【问题讨论】：

标签： javascript jquery wordpress checkbox toggle

【解决方案1】：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#verlanglijst ul li").on('click', function () {
                var that = $(this);
                that.toggleClass('active');
                if (that.hasClass('active')) {
                    that.find(':checkbox').prop('checked', true);
                } else {
                    that.find(':checkbox').prop('checked', false);
                }
            });
        });

    </script>
    <style>
        li {
            border:solid;
            border-width:1px;
        }
    </style>
</head>
<body>
    <div id="verlanglijst">
        <ul>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
        </ul>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

切换复选框尝试：

that.find(':checkbox').attr('checked', !that.find(':checkbox').attr('checked'));

【讨论】：