Question

这是一个菜鸟的一点点，但有可能有3个复选框并在选中一个时隐藏我的标签，但是如果选中了复选框2它也隐藏了那个，那么当你取消选中复选框1时它仍然会如果选中其他复选框，则保持隐藏状态，如可排序选项

<input type="checkbox" class="example" id="check1"><label>check1</label>
<input type="checkbox" class="example" id="check2"><label>check2</label>
<input type="checkbox" class="example" id="check3"><label>check3</label>

<a class="check1 check2" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>

<a class="check1" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3 check2" href="">check3</a>

<a class="check1 check2" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>

jQuery代码

$(function () { 
    $('.example').change(function() {
       theID = this.id;
       if ($(this).is(":checked")) { 
        $("." + theID).addClass("hide"); 
} else {
 $("." + theID).removeClass("hide");
}
});
 // Check while loading.
 $(".example").each(function () { 
   if ($(this).is(":checked")) 
   $("." + this.id).removeClass("hide"); 
});

});

Answer 1

请尝试以下操作。这就是你所需要的。隐藏在相应的复选框号

上

$(function () { 
    $('.example').change(function() {
          $("[class*=check]").removeClass("hide"); 
          $(".example:checked").each(function () { 
                $("." + this.id).addClass("hide"); 
          });
     });
});

.hide{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" class="example" id="check1"><label>check1</label>
<input type="checkbox" class="example" id="check2"><label>check2</label>
<input type="checkbox" class="example" id="check3"><label>check3</label>
<br/>

<a class="check1 check2" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>
<br/>
<a class="check1" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3 check2" href="">check3</a>
<br/>
<a class="check1 check2" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>

Answer 2

当复选框更改状态时，请执行以下操作：

获取所选复选框的所有ID
将这些ID和transform带入comma-delimited jQuery类选择器
隐藏所有a代码，然后显示与您存储的任何类别匹配的代码

$(function() {
  $('a').hide();
});

$('input[type="checkbox"]').on('change', function() {
  var checkedClasses = $('input[type="checkbox"]:checked').toArray().map(function(e) {
    return '.' + e.id;
  });
  var selector = checkedClasses.join(',');
  $('a').hide().filter(selector).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="example" id="check1"><label for="check1">check1</label>
<input type="checkbox" class="example" id="check2"><label for="check2">check2</label>
<input type="checkbox" class="example" id="check3"><label for="check3">check3</label>

<a class="check1 check2" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>

<a class="check1" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3 check2" href="">check3</a>

<a class="check1 check2" href="">check1</a>
<a class="check2" href="">check2</a>
<a class="check3" href="">check3</a>

Answer 3

我认为这就是您正在寻找的内容：http://jsfiddle.net/7mn2r9tb/

在复选框上点击显示所有内容，然后选中复选框并隐藏所有包含已检查元素ID的ID。

$('input:checkbox').change(function() { 
    $("a").removeClass("hide"); 

    $('input:checkbox:checked').each(function(){ 
       var theID = this.id;
       $("a[class*=" + theID + "]").addClass("hide");
    });
});

带有标签的可排序复选框

3 个答案: