После отправки отображать значения флажков в div

Question

Я пытаюсь отобразить значения флажков после отправки или применения кнопки. Кто-нибудь может мне помочь с этим. Я хочу, чтобы значения отображались после кнопки отправки. значения отдельных столбцов отображаются после нажатия кнопки применения определенного столбца. все значения должны быть в одном div. Эта функция предназначена для фильтра.

(Это будет выполнено в бэк-энде) после нажатия кнопки применить значения во втором столбце в соответствии с проверенными значениями первого столбца. и так далее.

$(':checkbox').on('change', function() {
    var $this = $(this);

    if (this.checked) {
        $('#results')
            .append('<li class="">' + $this.val() + '  <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
    } else {
        removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
    }
});

$(document).on('click', '.item', function() {
    removeCheckedResult($(this));
});

function removeCheckedResult($child) {
    $child.parent().remove();
    $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}

.container .hidden-menu{
  padding: 0;
  list-style: none;
}
.container .hidden-menu li{
  padding:10px 15px;
}
.container .hidden-menu li img{
  width:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
    </div>
  </div>
  <div class="container">
    <ul class="row hidden-menu clearfix" id="results">
    </ul>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 1

Надеюсь, это поможет:

$(function() {
$(':checkbox').on('change', function() {
    /*var $this = $(this);

    if (this.checked) {
        $('#results')
            .append('<li class="">' + $this.val() + '  <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
            
            
            
    } else {
        removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
    }*/
});

$(document).on('click', '.item', function() {
    removeCheckedResult($(this));
});

function removeCheckedResult($child) {
    $child.parent().remove();
    $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
   
  $("button").on("click", function(e){
	 var arr =[];
     var arr1 =[];
     $("#results").html('');
   e.preventDefault();
   var count =  document.querySelectorAll("input:checked")
   for (i = 0; i < count.length; i++) {
    arr.push(count[i].value);
    arr1.push(count[i].getAttribute("data-ref"));
  }
    for (j = 0; j < arr.length; j++) {
    
     $("#results").append(`<li>`+arr[j]+`<a href="#" class="item" data-cb="` + arr1[j] + `"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a></li>`)
    }
   
   /*$(this).next("span").text(arr);*/

  })
})

.container .hidden-menu{
  padding: 0;
  list-style: none;
}
.container .hidden-menu li{
  padding:10px 15px;
}
.container .hidden-menu li img{
  width:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test22" data-ref="2">test2<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test33" data-ref="3">test3<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test44" data-ref="4">test4<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test55" data-ref="5">test5<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
    </div>
  </div>
  <div class="container">
    <ul class="row hidden-menu clearfix" id="results">
    </ul>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 2

$(':checkbox').on('change', function() {
    var $this = $(this);

    if (this.checked) {
        $('#results')
            .append('<li class="">' + $this.val() + '  <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
    } else {
        removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
    }
});

$(document).on('click', '.item', function() {
    removeCheckedResult($(this));
});

function removeCheckedResult($child) {
    $child.parent().remove();
    $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
 $("button").on("click", function(e){
 e.preventDefault();
 var count =  $(this).parent().find("input:checked").length
 $(this).next("span").text(count)

})

.container .hidden-menu{
  padding: 0;
  list-style: none;
}
.container .hidden-menu li{
  padding:10px 15px;
}
.container .hidden-menu li img{
  width:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button><span></span>
      </div>
    </div>
  </div>
  <div class="container">
    <ul class="row hidden-menu clearfix" id="results">
    </ul>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 3

См. Фрагмент ниже: -

$(':checkbox').on('change', function() {
    var $this = $(this);

    if (this.checked) {
        $('#results')
            .append('<li class="">' + $this.val() + '  <a href="#" class="item" data-cb="' + $this.data('ref') + '"><img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></a> </li>');
    } else {
        removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
    }
});

$(document).on('click', '.item', function() {
    removeCheckedResult($(this));
});

function removeCheckedResult($child) {
    $child.parent().remove();
    $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}


$(document).ready(function(){
  $("button").click(function(){
    $("#results").addClass("shows");
  });
});

.container .hidden-menu{
  padding: 0;
  list-style: none;
}
.container .hidden-menu li{
  padding:10px 15px;
}
.container .hidden-menu li img{
  width:10px;
}
#results{display:none;}
ul#results.shows {
    display: flex;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
      <div class="col-md-3">
        <label><input type="checkbox" class="mainlist" value="test14" data-ref="10">test10<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test15" data-ref="11">test11<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
        <label><input type="checkbox" class="mainlist" value="test6" data-ref="13">test13<span class="checkmark"></span></label>
        <button>Apply</button>
      </div>
    </div>
  </div>
  <div class="container">
    <ul class="row hidden-menu clearfix" id="results">
    </ul>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>