Question

我正在使用一组带标签的复选框来控制在ul中可见的内容，并且我尝试定位每个li的span类来选择它们。但是，不是迭代每个复选框，而是将代码应用于第一个checked元素。

我的代码:(假设有一个围绕这些输入的表单标记）

    <input type="checkbox" id="1"><label for="1"></label>
    <input type="checkbox" id="2"><label for="2"></label>
    <input type="checkbox" id="3"><label for="3"></label>
    <input type="checkbox" id="4"><label for="4"></label>
    <input type="submit" value="submit">


<ul class="list-unstyled">
   <li><span class="platform">1</span></li>
   <li><span class="platform">2</span></li>
   <li><span class="platform">3</span></li>
   <li><span class="platform">4</span></li>
</ul>

$('form').submit(function(){
    event.preventDefault();
    $('.list-unstyled').each(function(){
        $(this).find('li').each(function(){
            if ($('input[type="checkbox"]:checked').attr('id') != $(this).find('.platform').text()){
                $(this).hide(200);
            }   
        });
    });

 });

这里是JSFiddle。我想要的是，如果我选择了多个复选框，那么在点击提交后只显示具有相同跨度文本的复选框。

Answer 1

它仅适用于第一个input元素的原因是因为您只是比较了第一个input元素＆＃39; id：

$('input[type="checkbox"]:checked').attr('id') // This will only select the first one

您应该根据当前id元素文字的文字，根据.platform属性选中复选框。

因此情况可能是：

!$('input[type="checkbox"][id="' + $(this).find('.platform').text() + '"]:checked').length

或更短：

!$('[id="' + $('.platform', this).text() + '"]:checkbox:checked').length

第一部分是an attribute selector，它将选择与当前id元素的文本具有相同.platform属性的元素。 :checkbox:checked部分会将选择限制为仅选中复选框，最后，.length用于检查是否存在匹配项，!否定结果。

Updated Example

$('form').submit(function(){
    event.preventDefault();
    $('.list-unstyled').each(function(){
        $(this).find('li').each(function(){
            if (!$('input[type="checkbox"][id="' + $(this).find('.platform').text() + '"]:checked').length){
                $(this).hide(200);
            } else {
                $(this).show(200);
            }
        });
    });
 });

您可以稍微缩短片段：

Updated Example

$('form').submit(function () {
    event.preventDefault();
    $('.list-unstyled li').each(function () {
        $(this).toggle(!$('[id="' + $('.platform', this).text() + '"]:checkbox:checked').length);
    });
});

检查多个复选框ID是否与多个跨区文本匹配

1 个答案: