Question

我有一个包含list-items的ul。单击列表项时，它的类将更改为活动状态。这就是我所拥有的。

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

列表列表项是使用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项时，类将更改为活动状态。这样可行。但我还想要的是，如果li项的类被设置为活动，则li项的复选框被设置为检查。删除活动类后，必须取消选中该复选框。

也许你可以帮助我;）

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

Answer 2

切换复选框尝试：

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

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

2 个答案: