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

Question

我正在使用一组带有标签的复选框来控制 ul 中可见的 li，并试图将每个 li 的跨度设为 class 到 select。但是，它不是遍历每个复选框，而是将代码应用于第一个选中的元素。

我的代码：（假设这些输入周围有一个表单标签）

    <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。我想要的是，如果我有多个复选框 selected，那么在点击提交后只会显示具有相同跨度文本的复选框。

Answer 1

它只适用于第一个 input 元素的原因是因为您只比较第一个 input 元素的 id:

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

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

因此条件可以是：

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

或更短：

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

第一部分是 an attribute selector，它将 select 一个与当前 .platform 元素的文本具有相同 id 属性的元素。 :checkbox:checked 部分将 selection 限制为仅选中复选框，然后最后，.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 是否匹配多个跨度文本

Check if multiple checkbox id's match multiple span text

html

checkbox

jquery

label