Показать сообщение отдельно
  #13 (permalink)  
Старый 26.10.2018, 23:22
Кандидат Javascript-наук
Отправить личное сообщение для Zhenyaxxxx Посмотреть профиль Найти все сообщения от Zhenyaxxxx
 
Регистрация: 25.10.2018
Сообщений: 102

Фильтр по чекбоксам
Вот код..... теперь будет понятней...... Хочу упростить 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, 27.10.2018 в 07:55.
Ответить с цитированием