Помогите реализовать идею, второй день бьюсь. Нужно реализовать выпадающий список из checkbox и при выборе, значения должно отображаться в input, а при снятии, удаляться.
Реализовал вот так, вроде работает, но если поставить несколько инпутов, то в итоге при клине на одном, выпадают списки у всех, и если черкнуть, то прикидываться количество значений чекетов на все инпуты
<div class="col-3" id="col1">
<div class="headVolumeGroup" id="headVolumeGroup1">
<input class="effect-1" data-parameter="1" data-id="volumeGroupsStringReturnException1"
type="text" autocomplete="off"
id="volumeGroupsStringReturnException1" />
<span class="focus-border"></span>
<p class="multiSel" id="multiSel1" hidden></p>
</div>
<div class="listVolumeGroup" id="listVolumeGroup1">
<div class="mutliSelect" id="mutliSelect1">
<ul>
<li>
<input type="checkbox" value="120" />120</li>
<li>
<input type="checkbox" value="138" />138</li>
<li>
<input type="checkbox" value="150" />150</li>
</ul>
</div>
</div>
</div>
<div class="col-3" id="col2">
<div class="headVolumeGroup" id="headVolumeGroup2">
<input class="effect-1" data-parameter="2" data-id="volumeGroupsStringReturnException2"
type="text" autocomplete="off"
id="volumeGroupsStringReturnException2" />
<span class="focus-border"></span>
<p class="multiSel" id="multiSel2" hidden></p>
</div>
<div class="listVolumeGroup" id="listVolumeGroup2">
<div class="mutliSelect" id="mutliSelect2">
<ul>
<li>
<input type="checkbox" value="120" />120</li>
<li>
<input type="checkbox" value="138" />138</li>
<li>
<input type="checkbox" value="150" />150</li>
</ul>
</div>
</div>
</div>
и сам JS
$(document).ready(function(){
$(".col-3 .headVolumeGroup input").on('click', function() {
$(".col-3 .listVolumeGroup ul").slideToggle('fast');
});
$(document).bind("click", function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("col-3"))
$(".col-3 .listVolumeGroup ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on("click", function() {
var title = $(this)
.closest(".mutliSelect")
.find('input[type="checkbox"]')
.val(),
title = $(this).val() + ",";
if ($(this).is(":checked")) {
var html = '<span title="' + title + '">' + title + "</span>";
$(".multiSel").append(html);
var val = $(".multiSel").text();
$(".col-3 .headVolumeGroup input").val(val);
} else {
$('span[title="' + title + '"]').remove();
var val = $(".multiSel").text();
$(".col-3 .headVolumeGroup input").val(val);
}
});
});
пытался атрибутами прикидывать нужный id и некий num, далее слеплять, чтобы в итоге брался у каждого свой инпут. Но в итоге переменными не удалось прокинуть значения.
Вот так
$(document).ready(function(){
var element;
var id;
$(".col-3 .headVolumeGroup input").on('click', function() {
id = this.getAttribute("data-parameter");
element = this.getAttribute("data-id");
$("#col" + id + " #listVolumeGroup" + id + " ul").slideToggle("fast");
});
$(document).bind("click", function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("col-3"))
$("#col" + id + " #listVolumeGroup" + id + " ul").hide();
});
$('#mutliSelect' + id + ' input[type="checkbox"]').on("click", function() {
var title = $(this)
.closest("#mutliSelect" + id)
.find('input[type="checkbox"]')
.val(),
title = $(this).val() + ",";
if ($(this).is(":checked")) {
var html = '<span title="' + title + '">' + title + "</span>";
$("#multiSel" + id).append(html);
var val = $("#multiSel" + id).text();
$("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val);
} else {
$('span[title="' + title + '"]').remove();
var val = $("#multiSel" + id).text();
console.log(element);
$("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val);
}
});
});
Естественно не сработало как нужно.
Помогите плиз, сам пока на начальных этапах в изучении jQuery. На js смог сделать, но хотелось бы понять, как это на jQuery.
Странно конечно что на чистом js у тебя получилось, а переписать на jQuery нет.
Все немного проще) И для взаимодействия с input'ами не стоит использовать события клика, лучше пользоваться специальными событиями, такими как: input, focus, blur, change.
Вот набросал небольшой пример, надеюсь правильно понял твою задумку.
$(document).on('focus', '.show-list', function() {
var $input = $(this);
var $checkList = $input.siblings('.check-list'),
$checkBoxes = $checkList.find('.check-list__checkbox');
$checkList.show();
$checkBoxes.on('change', function() {
var inputText = '',
checkStatus = 0;
for (var i = 0; i < $checkBoxes.length; i++) {
if ($checkBoxes.eq(i).is(":checked")) {
checkStatus++;
if (inputText === '') {
inputText = $checkBoxes.eq(i).val();
} else {
inputText += ', ' + $checkBoxes.eq(i).val();
}
$input.val(inputText);
} else if (checkStatus === 0) {
$input.val('');
}
}
});
});
.wrapper + .wrapper {
margin-top: 20px;
}
.check-list {
display: none;
}
.check-list ul {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" class="show-list">
<div class="check-list">
<ul>
<li>
<input type="checkbox" value="120" class="check-list__checkbox" />120</li>
<li>
<input type="checkbox" value="138" class="check-list__checkbox" />138</li>
<li>
<input type="checkbox" value="150" class="check-list__checkbox" />150</li>
</ul>
</div>
</div>
<div class="wrapper">
<input type="text" class="show-list">
<div class="check-list">
<ul>
<li>
<input type="checkbox" value="120" class="check-list__checkbox" />120</li>
<li>
<input type="checkbox" value="138" class="check-list__checkbox" />138</li>
<li>
<input type="checkbox" value="150" class="check-list__checkbox" />150</li>
</ul>
</div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Вопрос пожалуй даже слишком тривиален, но в интернете ясного ответа я не нашелТак вот собственно и вопрос: Можно ли писать программы под андроид...
не могу получить информацию по запросу VK API