вывод блоков
HTML
<div class="cost_calculation">
<div class="palet_clone">
<div class="palet">
блок
</div>
</div>
<form class="calculation_form cl">
<div class="calculation_section type_cargo cl">
<div class="cargo type_cargo_2 active">
<div class="col_place">
<div class="col col_left">
<input class="checkbox" type="checkbox" id="one_place">
<label class="label" for="one_place"><span class="checkbox_block"></span>одно место</label>
</div><div class="col col_right"><span class="quantity_text">количество мест:</span> <input class="field quantity_place number" type="number" step="any" name="col_name">
</div>
</div>
<div class="palet">
блок5
</div>
</div>
</div>
</form>
</div>
CSS
.cl:after,.cl:before,.cnt ul li:before{content:""}.call,.cnt ol li:before,h1{text-align:center}.cnt ol,.cnt ul li,ol,ul{list-style:none}.affiliates_contacts a,.affiliates_link,.calculate,.calculate:hover,.call,.copyright a,.e-mail a,.main_menu_link,.menu_link,.personak_menu_link,.personal .top a,.phone a,.submenu_link,a{text-decoration:none}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}h2,h3,h4{padding:10px 0 4px;text-transform:uppercase}label{cursor:pointer}img{vertical-align:top;max-width:100%}input[type=text]:focus{outline:0}button,input{line-height:normal;outline:0}button,input,select,textarea{font-size:100%;font-family:Arial,Helvetica,Verdana,sans-serif;margin:0;vertical-align:baseline}input{box-shadow:none;-webkit-box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-appearance:none}input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-moz-box-sizing:cnt-box;-webkit-appearance:textfield;-webkit-box-sizing:cnt-box;box-sizing:cnt-box}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input::-moz-inner-spin-button,input::-moz-outer-spin-button{-moz-appearance:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#fff;opacity:1}input:-moz-placeholder,textarea:-moz-placeholder{color:#fff;opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{color:#fff;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#fff;opacity:1}html...
JavaScript
/*Функция изменения количества мест*/
function changeColPalet(){
var qPlaceVal = $('.quantity_place').val(),
clonePalet = $('.palet_clone .palet').clone();
if(qPlaceVal > 5){
$('.quantity_place').val(5);
}
else if(qPlaceVal === 0){
$('.quantity_place').val(1);
}
var qPlaceVal = $('.quantity_place').val(),
qPlace = $('.type_cargo_2 .palet').length;
if(qPlaceVal > qPlace && qPlaceVal !== ''){
for (var i = qPlace; i < qPlaceVal; i++) {
clonePalet = $('.palet_clone .palet').clone();
$('.type_cargo_2').append(clonePalet);
}
}
else if(qPlaceVal == ''){
$('.type_cargo_2 .palet').remove();
$('.type_cargo_2').append(clonePalet);
}
else{
$('.type_cargo_2 .palet').each(function(){
var thisIndex = $(this).index();
if(thisIndex > qPlaceVal){
$(this).remove();
}
});
}
}
$(function() {
$('.calculation_form').on('change', '#one_place', function(){
if($(this).prop('checked')){
$('.quantity_place').val(1);
changeColPalet();
}
});
$('.calculation_form').on('keyup', '.quantity_place', function(e){
changeColPalet();
$('#one_place').prop('checked', false);
});
});