後のdivの表示チェックボックスの値を送信

Pavankumarコリ：

私は、チェックボックスの値が後に提出するか、[適用]ボタンを表示しようとしています。これで缶誰の助けを私に。私は、値が後に表示されるボタンを提出することにしたいです。特定の列は、ボタンがクリックされた適用した後、特定の列の値が表示されます。すべての値は、単一の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>

Fahimカーン：

私はそれに役立つことを願っています：

$(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>