选中右复选框时显示 div答案

【问题标题】：Show div when right checkbox is checked选中右复选框时显示 div
【发布时间】：2014-05-09 22:43:34
【问题描述】：

我想检查一个复选框的值，并将该值与名为“entry”的多个 div 类进行比较。如果复选框值与“entry div”的类相同，则将显示 entry div。

这是我的代码：

<div class="entry float-left span4">
                        <a href="<?php the_permalink(); ?>">
                        <div class="span3">
                            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                            <img class="art-circle" src=<?php echo $image[0]; ?> />
                        </div>
                        </a>
                        <div class="span8 entry-text">
                            <a href="<?php the_permalink(); ?>">
                                <h1><?php the_title(); ?></h1> 
                            </a>
                            <div class="art-date"><?php the_field('datum'); ?></div>   
                            <a href="<?php the_permalink(); ?>">         
                                <p><?php the_excerpt(); ?></p>
                            </a>
                            <div class="art-location"><?php the_field('plaats'); ?></div> 
                        </div>
                    </div>

HTML 复选框

<ul class="submenu">
            <label class="checkbox">
                <input type="checkbox" value="visueel">Visueel
            </label>
            <label class="checkbox">
                <input type="checkbox" value="auditief">Auditief
            </label>
            <label class="checkbox">
                <input type="checkbox" value="cognitief of neurologisch">Cognitief of neurologisch
            </label>
            <label class="checkbox">
                <input type="checkbox" value="fysiek">Fysiek
            </label>
            <label class="checkbox">
                <input type="checkbox" value="spraak">Spraak
            </label>
       </ul>

jQuery

$('input[type="checkbox"]').change(function(){
        var checkboxname = $(this).val();
        $('.entry').each(function(i, obj) {
            var tags = $(this).find('.tags').html().toLowerCase();
            var arr = tags.split(',');
            $.each( arr, function( key, value ) {
              if(checkboxname==value){
                  alert(checkboxname+':'+value);
              }
            });
        });     
})

我需要选择正确的条目 div 并说它可以显示，而不是警报。我只是不知道如何选择这个特定的条目 div。我不能使用 $(this) 因为这指的是复选框，如果我使用 .entry 我将显示该类的所有 div。什么是正确的解决方案？

【问题讨论】：

小提琴请.....添加你的html代码..
div 代码在哪里...清楚以更快地解决
您使用的是<ul>，但 li 标签在哪里
你的意思是这样的吗？ jsfiddle.net/sh2Lr/13

标签： jquery html select checkbox

【解决方案1】：

小提琴：

http://jsfiddle.net/Hwwzv/1/

HTML：

<div class="submenu">
    <label class="checkbox">
        <input type="checkbox" value="visueel">Visueel
    </label>
    <label class="checkbox">
        <input type="checkbox" value="auditief">Auditief
    </label>
</div>

<div class="entry visueel">This is visual div</div>
<div class="entry auditief">This is auditief div</div>

CSS：

.entry{
    display:none;
}

JQUERY：

$('input[type="checkbox"]').change(function () {
    var checkboxname = $(this).val();
    if ($(".entry").hasClass(checkboxname)) {
        if ($(this).is(":checked")) {
            $(".entry." + checkboxname).show();
        } else {
            $(".entry." + checkboxname).hide();
        }
    }
});

【讨论】：

【解决方案2】：

试试这个，使用hasClass方法

$('input[type="checkbox"]').change(function(){
        var checkboxname = $(this).val();
    var checkedValue = $(this).is(':checked');
        // iterate all entry divs and show only matched div with checkbox value
        $('.entry').each(function() {

           if($(this).hasClass(checkboxname))
            {
               if(checkedValue)
                 $(this).show();
               else
                 $(this).hide();   
             }
         });
   });

这是工作的JSFiddle

【讨论】：

这指的是input[type="checkbox"]这不是答案
但在复选框内我正在迭代条目 div，所以在循环内这是指 div 而不是复选框
@susheel - 请找到更新的答案和 jsfiddle。对不起，我给了一个额外的 '})' 所以不工作
是的……我以后一定会好好照顾的！！

【解决方案3】：

最后，我首先使用此代码显示所有条目，然后检查选择了哪些过滤器来显示所有相关条目：

$('input[type="checkbox"]').change(function () {
    $('.entry').hide();
    $('input[type=checkbox]:checked').each(function(){
        var textname = $(this).val();
        $('.'+textname).each(function(){
            $(this).show();
        });
    });
});

感谢您的回答，因为它可以解决我的问题

【讨论】：