After Submit Display Checkbox Values In Div

I am tried to display the checkbox values after submit or apply button. Can anybody help me with this. I want values to be displayed after submit button. particular column values d

Solution 1:

I hope it will help:

$(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));
});

functionremoveCheckedResult($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-menuli{
  padding:10px15px;
}
.container.hidden-menuliimg{
  width:10px;
}

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><section><divclass="container"><divclass="row"><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test22"data-ref="2">test2<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test33"data-ref="3">test3<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test44"data-ref="4">test4<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test55"data-ref="5">test5<spanclass="checkmark"></span></label><button>Apply</button><span></span></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test6"data-ref="6">test6<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test7"data-ref="7">test7<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test8"data-ref="8">test8<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test9"data-ref="9">test9<spanclass="checkmark"></span></label><button>Apply</button><span></span></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test10"data-ref="10">test10<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test11"data-ref="11">test11<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test12"data-ref="12">test12<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test13"data-ref="13">test13<spanclass="checkmark"></span></label><button>Apply</button><span></span></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test14"data-ref="10">test10<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test15"data-ref="11">test11<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test12"data-ref="12">test12<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test6"data-ref="13">test13<spanclass="checkmark"></span></label><button>Apply</button><span></span></div></div></div><divclass="container"><ulclass="row hidden-menu clearfix"id="results"></ul></div></section><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Solution 2:

See the Snippet Below :-

$(':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));
});

functionremoveCheckedResult($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-menuli{
  padding:10px15px;
}
.container.hidden-menuliimg{
  width:10px;
}
#results{display:none;}
ul#results.shows {
    display: flex;
}

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><section><divclass="container"><divclass="row"><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test2"data-ref="2">test2<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test3"data-ref="3">test3<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test4"data-ref="4">test4<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test5"data-ref="5">test5<spanclass="checkmark"></span></label><button>Apply</button></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test6"data-ref="6">test6<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test7"data-ref="7">test7<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test8"data-ref="8">test8<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test9"data-ref="9">test9<spanclass="checkmark"></span></label><button>Apply</button></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test10"data-ref="10">test10<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test11"data-ref="11">test11<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test12"data-ref="12">test12<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test13"data-ref="13">test13<spanclass="checkmark"></span></label><button>Apply</button></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test14"data-ref="10">test10<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test15"data-ref="11">test11<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test12"data-ref="12">test12<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test6"data-ref="13">test13<spanclass="checkmark"></span></label><button>Apply</button></div></div></div><divclass="container"><ulclass="row hidden-menu clearfix"id="results"></ul></div></section><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Solution 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));
});

functionremoveCheckedResult($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-menuli{
  padding:10px15px;
}
.container.hidden-menuliimg{
  width:10px;
}

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><section><divclass="container"><divclass="row"><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test2"data-ref="2">test2<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test3"data-ref="3">test3<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test4"data-ref="4">test4<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test5"data-ref="5">test5<spanclass="checkmark"></span></label><button>Apply</button><span></span></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test6"data-ref="6">test6<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test7"data-ref="7">test7<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test8"data-ref="8">test8<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test9"data-ref="9">test9<spanclass="checkmark"></span></label><button>Apply</button></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test10"data-ref="10">test10<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test11"data-ref="11">test11<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test12"data-ref="12">test12<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test13"data-ref="13">test13<spanclass="checkmark"></span></label><button>Apply</button><span></span></div><divclass="col-md-3"><label><inputtype="checkbox"class="mainlist"value="test14"data-ref="10">test10<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test15"data-ref="11">test11<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test12"data-ref="12">test12<spanclass="checkmark"></span></label><label><inputtype="checkbox"class="mainlist"value="test6"data-ref="13">test13<spanclass="checkmark"></span></label><button>Apply</button><span></span></div></div></div><divclass="container"><ulclass="row hidden-menu clearfix"id="results"></ul></div></section><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>