выпадающий список на jQuery с checkBox

155
26 сентября 2019, 05:40

Помогите реализовать идею, второй день бьюсь. Нужно реализовать выпадающий список из 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.

Answer 1

Странно конечно что на чистом 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>

READ ALSO
Обработка javascript запросов на сервере python

Обработка javascript запросов на сервере python

Имеется простой вебсокет сервер на python

147
Разработка android программ на web языках

Разработка android программ на web языках

Вопрос пожалуй даже слишком тривиален, но в интернете ясного ответа я не нашелТак вот собственно и вопрос: Можно ли писать программы под андроид...

125
API VK account.lookupContacts Access denied [закрыт]

API VK account.lookupContacts Access denied [закрыт]

не могу получить информацию по запросу VK API

141