Такой вопрос, есть JS код который выводит выбранные чекбоксы в другое поле. И вроде как всё норм, но когда создал форму обратной связи, при нажатии на любой из инпутов они тоже пропадают, что можно сделать? То есть любой клик по форме вызывает скрытие поля...
let checkBoxes = document.getElementsByTagName("input");
let aviableList = document.getElementById("aviable");
let selectedList = document.getElementById("selected");
[...checkBoxes].forEach(item=>item.addEventListener("click", function(){
if (!this.checked) {
aviableList.appendChild(this.parentElement);
} else {
selectedList.appendChild(this.parentElement);
}
}));
#choose {
padding-top: 10px;
text-align: center;
font-size: 35px;
font-weight: bold;
}
input{
cursor: pointer;
}
label{
cursor: pointer;
}
.container {
display: flex;
justify-content: center;
}
.Prokrutka,
.Prokrutka_out {
flex: 0 1 auto;
}
.Prokrutka {
margin-left: 15px;
max-width: 35%;
height: 400px;
/* высота блока */
width: 400px;
/* ширина блока */
background: #fff;
/* цвет фона, белый */
border: 1px solid #C1C1C1;
/* размер и цвет границы блока */
overflow-x: scroll;
/* прокрутка по горизонтали */
overflow-y: scroll;
/* прокрутка по вертикали */
padding-left: 15px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.Prokrutka_out {
margin-left: 15px;
max-width: 20%;
height: 400px;
/* высота блока */
width: 35%;
/* ширина блока */
background: #fff;
/* цвет фона, белый */
border: 1px solid #C1C1C1;
/* размер и цвет границы блока */
overflow-x: scroll;
/* прокрутка по горизонтали */
overflow-y: scroll;
/* прокрутка по вертикали */
padding-left: 15px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
@media screen and (max-width: 800px) {
.container {
flex-flow: column nowrap;
}
.Prokrutka,
.Prokrutka_out {
align-self: center;
max-width: 100%;
width: 85%;
height: auto;
padding: 10px;
}
}
<p id="choose">Выберите необходимые услуги для перевозки</p>
<br>
<div class="container">
<div class="Prokrutka">
<div id="aviable">
<br>
<div id="checkGroup1"><label class="box-label"><input type="checkbox" id="op1" name="Сборный груз">Сборный груз</label></div>
<div id="checkGroup2"><label class="box-label"><input type="checkbox" id="op2" name="Негабаритный груз"> Негабаритный груз</label></div>
<div id="checkGroup3"><label class="box-label"><input type="checkbox" id="op3" name="Контейнерные перевозки"> Контейнерные перевозки</label></div>
<div id="checkGroup4"><label class="box-label"><input type="checkbox" id="op4" name="Опасные грузы"> Опасные грузы</label></div>
<div id="checkGroup5"><label class="box-label"><input type="checkbox" id="op5" name="Перевозка фурой"> Перевозка фурой</label></div>
<div id="checkGroup6"><label class="box-label"><input type="checkbox" id="op6" name="Междугородние переезды"> Междугородние переезды</label></div>
<div id="checkGroup7"><label class="box-label"><input type="checkbox" id="op7" name="Экспресс-доставка"> Экспресс-доставка</label></div>
<div id="checkGroup8"><label class="box-label"><input type="checkbox" id="op8" name="Авиаперевозка"> Авиаперевозка</label></div>
<div id="checkGroup9"><label class="box-label"><input type="checkbox" id="op9" name="Доставка документов"> Доставка документов</label></div>
<div id="checkGroup10"><label class="box-label"><input type="checkbox" id="op10" name="Ответственное хранение"> Ответственное хранение</label></div>
<div id="checkGroup11"><label class="box-label"><input type="checkbox" id="op11" name="Кросс-докинг"> Кросс-докинг</label></div>
<div id="checkGroup12"><label class="box-label"><input type="checkbox" id="op12" name="Доставка для супермаркетов"> Доставка для супермаркетов</label></div>
<div id="checkGroup13"><label class="box-label"><input type="checkbox" id="op13" name="Доставка для интернет-магазинов"> Доставка для интернет-магазинов</label></div>
<div id="checkGroup14"><label class="box-label"><input type="checkbox" id="op14" name="Выделенный транспорт"> Выделенный транспорт</label></div>
<div id="checkGroup15"><label class="box-label"><input type="checkbox" id="op15" name="3PL"> 3PL</label></div>
</div>
</div>
<br>
<div class="Prokrutka_out">
<div id="selected"> Вы выбрали:<br>
</div>
</div>
</div>
<div class="containers">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1 class="text-center">Оставьте заявку для выбранной компании</h1>
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Имя *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Ваше имя *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Фамилия *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Ваша фамилию *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Город отправки *</label>
<input id="form_name" type="text" name="FromPoint" class="form-control" placeholder="Москва *" required="required" data-error="FromPoint is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Город доставки *</label>
<input id="form_lastname" type="text" name="ToPoint" class="form-control" placeholder="Рязань *" required="required" data-error="ToPoint is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Дата отправки *</label>
<input id="form_name" type="date" name="DateCreated" class="form-control" placeholder="12.01.2021 *" required="required" data-error="DateCreated is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Тип груза *</label>
<input id="form_lastname" type="text" name="CargoType" class="form-control" placeholder="Генеральный *" required="required" data-error="CargoType is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Вес брутто *</label>
<input id="form_name" type="number" name="WeightBrutto" class="form-control" placeholder="100 *">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Объём *</label>
<input id="form_lastname" type="number" name="Volume" class="form-control" placeholder="28 *" required="required" data-error="Volume is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="form_name">Длина, м *</label>
<input id="form_name" type="number" name="Length" class="form-control" placeholder="1 *" required="required" data-error="Length is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="form_lastname">Ширина, м *</label>
<input id="form_lastname" type="number" name="Width" class="form-control" placeholder="0.2 *" required="required" data-error="Width is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="form_lastname">Высота, м *</label>
<input id="form_lastname" type="number" name="Height" class="form-control" placeholder="0.7 *" required="required" data-error="Height is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email"
class="form-control" placeholder="Пожалуйста, введите ваш email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Телефон</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Пожалуйста, введите ваш телефон">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Сообщение </label>
<textarea id="form_message" name="message" class="form-control" placeholder="У меня есть вопросы" rows="4"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Отправить">
</div>
</div>
</div>
</form>
</div>
</div>
</div>