Javascript-форум - Поместить однотипные input "checkbox" для сортировки в цикл

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Поместить однотипные input "checkbox" для сортировки в цикл (https://javascript.ru/forum/jquery/75628-pomestit-odnotipnye-input-checkbox-dlya-sortirovki-v-cikl.html)

Zhenyaxxxx,
изменить то надо всего пару значений, знать бы на что менять,а так можно только гадать.

Zhenyaxxxx,
от вас требовалось содержимое строк 34 - 37 ... !!!

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .diametr_form label{
            display:  table-row;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
$(function() {
var checkbox = $('[name="diametr"]'), block = $(".prom_vents~#product");
block.hide();
checkbox.change(function() {
 var cls = "" + $.map(checkbox.filter(":checked"), function(el) {
        return '[class~="'+el.value+'"]'
});
block.hide().filter(cls).show();
    });
});
    </script>
</head>

<body>
<form method="post" action="" class="diametr_form"><label></label>
<label><input type="checkbox" name="diametr" value="100" class="d100" />100 мм</label>
<label><input type="checkbox" name="diametr" value="125" class="d125" />125 мм</label>
<label><input type="checkbox" name="diametr" value="150" class="d150" />150 мм</label>
 </form>
<h2 class="prom_vents">вентиляторы</h2>
        <div  id="product" class="100">100</div>
        <div  id="product" class="125">125</div>
        <div  id="product" class="150">150</div>

</body>
</html>

Фильтр по чекбоксам

Вот код..... теперь будет понятней...... Хочу упростить js код, как вы делали до этого в примере, но оставить логику привязки сортировки по значению по фразе из массива $raketa.... Буду вам очень благодарен

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">

<style>
#diametr_form label{  display:  table-row;  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

$('document').ready(function(){    


$('#diametr_form~#my_model').hide();

$(".d100").change(function() { $('#diametr_form~#my_model[*!*class~="100"*/!*]').hide(500); 
if(this.checked) { $('#diametr_form~#my_model[class~="100"]').show("slow");
} else { $('#diametr_form~#my_model[class~="100"]').hide(500); }
});

$(".d125").change(function() {
$('#diametr_form~#my_model[class~="125"]').hide(500);
if(this.checked) { $('#diametr_form~#my_model[class~="125"]').show("slow");
} else { $('#diametr_form~#my_model[class~="125"]').hide(500); }
}); 

$(".d200x400").change(function() { 
$('#diametr_form~#my_model[class~="200*400"]').hide(500); 
if(this.checked) { $('#diametr_form~#my_model[class~="200*400"]').show("slow");
} else { $('#diametr_form~#my_model[class~="200*400"]').hide(500); }
});

});
</script>


</head>
<body>

<form method="post" action="" id="diametr_form">
<label><input type="checkbox"  class="d100" />100 мм</label>
<label><input type="checkbox"  class="d125" />125 мм</label> 
<label><input type="checkbox"  class="d200x400" />200*400 мм</label> 
</form>

<?php
$raketa = array('Первый 100', 'Второй 100', 'Ура 125', 'Опять 125', 'Еще 150', 'Раз 150', ',kf 200*400', 'gg 200*400');
$index=0;
$elements = count ($raketa);
while($index < $elements){  ?>
    <div id="my_model" *!* class="<?= $raketa[$index];   ?>"   */!* style="display:block; width:10em; border:1px solid red;"><?= $raketa[$index]; ?></div><br/> 
<?php $index++;
}

?>

</body>
</html>

Zhenyaxxxx,
испорченный телефон ... уже несколько постов ... напишите html код ваших блоков, иначе я не могу вам помочь!!!
4 строки, да одного блока бы хватило!!!

рони,
не волнуйтесь, вы так :victory:
Zhenyaxxxx
в браузере нажмите f12 -> Elements в окне код отрендеренной страницы
найдите нудный блок правой кнопкой Copy -> Copu OuterHTML

Добавил в код сверху run, чтоб можно было запустить его но он почему то не работает (чекбокы есть, но не выводят значения), хотя на сайте (под формой 3 чекбокса https://ensy.com.ua/?page=contacti )у меня все ок... не знаете почему? Выделил жирным ДИВ, которые выводится циклом... а сверху в js строчку, где ищу совпадение в классе...

Zhenyaxxxx,
возможно проблема понимания в том что вы пишите php, а вас просят результат работы php - html код - чтобы понять какая у вас струтура DOM.
и примеры здесь на форуме тоже не работают с php.
в checkbox можно value добавить?

конечно можно, главная цель это сократить js и оставить возможность фильтровать по части значения из массива $raketa[$index];

Zhenyaxxxx,
скрипт один и тотже, во всех постах, главное правильно вписать селекторы, согласно вашей структуре.
добавлено value в checkbox, тащить в классы описание не самый лучший метод.

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .diametr_form label{
            display:  table-row;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
$(function() {
var checkbox = $('#diametr_form input:checkbox'), block = $('#diametr_form~#my_model');
block.hide();
checkbox.change(function() {
 var cls = "" + $.map(checkbox.filter(":checked"), function(el) {
        return '[class~="'+el.value+'"]'
});
block.hide().filter(cls).show();
    });
});
    </script>
</head>

<body>
<form method="post" action="" id="diametr_form">
<label><input type="checkbox"  value="100" class="d100" />100 мм</label>
<label><input type="checkbox"  value="125" class="d125" />125 мм</label>
<label><input type="checkbox"  value="200*400" class="d200x400" />200*400 мм</label>
</form>

    <div id="my_model" class="Первый 100"  style="display:block; width:10em; border:1px solid red;">Первый 100</div><br/>
    <div id="my_model" class="Второй 100"  style="display:block; width:10em; border:1px solid red;">Второй 100</div><br/>
    <div id="my_model" class="Ура 125"  style="display:block; width:10em; border:1px solid red;">Ура 125</div><br/>
    <div id="my_model" class="Опять 125"  style="display:block; width:10em; border:1px solid red;">Опять 125</div><br/>
    <div id="my_model" class="Еще 150"  style="display:block; width:10em; border:1px solid red;">Еще 150</div><br/>
    <div id="my_model" class="Раз 150"  style="display:block; width:10em; border:1px solid red;">Раз 150</div><br/>
    <div id="my_model" class=",kf 200*400"  style="display:block; width:10em; border:1px solid red;">,kf 200*400</div><br/>
    <div id="my_model" class="gg 200*400"  style="display:block; width:10em; border:1px solid red;">gg 200*400</div><br/>




</body>
</html>

Чудеса) все работает))) Огромнейшее спасибо)):dance: