Как можно реализовать фильтрацию div блоков на js?

Question

[dev400]

Допустим есть 3 блока

<div class="blocks">
    <div class="one">
    текст блока one
    </div>

    <div class="two">
    текст блока two
    </div>

    <div class="three">
    текст блока three
    </div>
</div>

И есть чекбоксы

<div class="checkbox">
                <input type="checkbox" name="all" ><label for="all">Показать все</label>
                <input type="checkbox" name="one" ><label for="one">Показать one</label>
                <input type="checkbox" name="two" ><label for="two">Показать two</label>
                <input type="checkbox" name="three" ><label for="three">Показать three</label>
            </div>

Как сделать так, чтобы при клике на чекбокс 'one' показывался див с классом 'one', а если нажали еще и 'two', то див.two тоже был показан рядом? Перебирать каждое действие на js?

if(this.name=="one") {
			if(this.checked){
				$(".one").show();
				$(".two").hide();
				$(".three").hide();
			} else {
				$(".one").hide();
				$(".two").show();
				$(".three").show();
			}
		}

Но по моему это лапша...

Answer 1

[Алексей]

фидлер и кодпен у меня глючат почему-то, попробуй мой топорный вариант:

<div class="checkbox" >
	<input type="checkbox" id="all" onclick="showAll();"><label for="all">Показать все</label>
	<input type="checkbox" id="one" onclick="hideBox();"><label for="one">Показать one</label>
	<input type="checkbox" id="two" onclick="hideBox();"><label for="two">Показать two</label>
	<input type="checkbox" id="three" onclick="hideBox();"><label for="three">Показать three</label>
</div>
<div class="blocks">
    <div class="one">текст блока one</div>
    <div class="two">текст блока two</div>
    <div class="three">текст блока three</div>
</div>

function showAll () {
$('.blocks div').css('display','block');
$('.checkbox input').attr('checked', false);
$('#all').prop('checked', true);
};

function hideBox() {
$('#all').attr('checked', false);
$( ".blocks div" ).each(function(i) {
    var className = $(this).attr("class"); 
    var idBox = $('#'+className).prop("checked");
    if (!idBox) {
      $(this).css('display','none');
    } else {
      $(this).css('display','block');
    };
});
};

Answer 2

[zdiii]

Сделал Codepen

Comments

[dev400]

да, но при нескольких чекбоксах не показывается содержимое нескольких дивов, оно заменяется