如果单击，则切换已选中/未选中的复选框

Toggle checkboxes checked/unchecked if click on

本文关键字：复选框 单击 如果      更新时间：2024-06-11

我有一个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项目的复选框设置为选中。当活动类被删除时，必须取消选中该复选框。

也许你可以帮我；）

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

切换复选框try:

that.find(':checkbox').attr('checked', !that.find(':checkbox').attr('checked'));
相关文章：