сортировать флажки с тегом

Question

hi bit noob к этому, но возможно ли иметь 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

Когда флажок изменяет состояние, выполните следующие действия:

1. Получить все идентификаторы проверяемых коробки
2. Возьмите эти идентификаторы и transform их в comma-delimited JQuery класс селектор
3. Скрыть все 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 2

Попробуйте ниже. это то, что вам нужно. Скрыть соответствующий флажок.

$(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 3

Я думаю, что это то, что вы ищете: http://jsfiddle.net/7mn2r9tb/

На Флажок Нажмите показать все A, и затем установите флажки и спрячьте все элементы, содержащие идентификатор проверенного элемента в своем классе.

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

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