提交按鈕后顯示復選框值

Question

我正在嘗試實現過濾器。 選中復選框並提交后，選中的值應顯示在 div 中，並帶有一個Clear all按鈕和一個X按鈕以單獨刪除，如圖所示。

有誰能夠幫助我。

 $(document).ready(function() { $('#showmenu').click(function() { $('.menu').show("slide"); }); }); jQuery(document).ready(function(e) { function t(t) { e(t).bind("click", function(t) { t.preventDefault(); e(this).parent().fadeOut() }) } e(".dropdown-toggle").click(function() { var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden"); e(".button-dropdown .dropdown-menu").hide(); e(".button-dropdown .dropdown-toggle").removeClass("active"); if (t) { e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active") } }); e(document).bind("click", function(t) { var n = e(t.target); if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide(); }); e(document).bind("click", function(t) { var n = e(t.target); if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active"); }) }); /******************************************/ $(function() { $('input[type="checkbox"]').click( function() { // if($(this).is(":checked")){ // $("#div ul").append("<li> value <a href='javascript:void(0);' class='remove'>&times;</a></li>"); // } value = $(this).val(); if ($(this).is(':checked')) { $('<li></li>').appendTo('#div ol').text($(this).val()); } else { value = $(this).val(); if ($('#div ol').has('li:contains("' + value + '")')) { $('#div ol li:contains("' + value + '")').remove(); } } }); }); /******************************************/ /******************************************/

 .filter-section .container { margin-right: 100px; margin-left: 100px; padding: 0px; height: 24px; } .filter-section #showmenu { margin: 0px; margin-right: 34px; } .filter-section #showmenu p { color: #3f3f3f; font-size: 18px; font-weight: 600px; margin: 0px; padding: 0px; } .filter-section .menu .nav { border-left: 1px solid #3f3f3f; } .filter-section .nav { display: block; margin: 0; padding: 0; height: 24px; } .filter-section .nav li { display: inline-block; list-style: none; } .filter-section .menu .nav .button-dropdown { position: relative; margin-left: 24px; height: 24px; } .filter-section .menu .nav li a { color: #000; background-color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; } .filter-section .menu .nav li a span { font-size: 26px; line-height: 0; height: 24px; margin-right: 10px; } .filter-section .menu .nav li .dropdown-toggle::after { display: inline-block; margin-left: 12px; vertical-align: 2px; content: ""; border-top: 6px solid; border-right: 3px solid transparent; border-bottom: 0; border-left: 3px solid transparent; } .filter-section .menu .nav li .dropdown-menu { display: none; position: absolute; left: 0; padding: 0; margin: 0; margin-top: 0px; margin-left: 22px; text-align: left; width: 224px; padding: 10px 24px; } .filter-section .menu .nav li .dropdown-menu div { border-bottom: 1px solid #000; } .filter-section .menu .nav li .dropdown-menu div:last-child { border-bottom: none; padding-bottom: 10px; padding-top: 20px; } .filter-section .menu .nav li .dropdown-menu.active { display: block; } /*.nav li .dropdown-menu a { width: 150px; }*/ /****************************************/ .listofslect { padding: 0px; } .listofslect li { padding: 10px; font-size: 14px; display: inline-block; -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .name { display: inline-block; font-size: 14px; font-weight: 600; padding: 0; margin: 0; padding-bottom: 14px; padding-top: 10px; } .name input { margin-right: 12px; } .button { border: none; color: white; padding: 14px 0px; text-align: center; font-size: 16px; width: 100%; cursor: pointer; border-radius: 4px; background-color: #000000; } button:focus { outline: 0px dotted; outline: 0px auto -webkit-focus-ring-color; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <section> <div class="filter-section"> <div class="container d-flex"> <div id="showmenu"> <p> <img src="images/hamburger-icon-open.png"> Filter</p> </div> <div class="menu" style="display: none;"> <ul class="nav"> <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Learning Modes</a> <div class="dropdown-menu"> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="Self paced"/>Self paced</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="Classroom"/>Classroom</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="Live Virtual-Classroom"/>Live Virtual Classroom</label> </div> <div class=""> <button class="button">Apply</button> </div> </div> </li> <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Level</a> <div class="dropdown-menu"> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="ABC"/>ABC</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="DEF"/>DEF</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="GHI"/>GHI</label> </div> <div class=""> <button class="button">Apply</button> </div> </div> </li> <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Role</a> <div class="dropdown-menu"> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="JKL"/>JKL</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="MNO"/>MNO</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="PQR"/>PQR</label> </div> <div class=""> <button class="button">Apply</button> </div> </div> </li> <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle"><span>&#8226;</span>Skills</a> <div class="dropdown-menu"> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="STU"/>STU</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="VWX"/>VWX</label> </div> <div class=""> <label class="name"><input type="checkbox" class="" id="checkbox4" value="YZ"/>YZ</label> </div> <div class=""> <button class="button">Apply</button> </div> </div> </li> </ul> </div> </div> <div class="container" id="div"> <ol class="listofslect"></ol> </div> </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>

附上 jsFiddle和Codepen代碼。

Answer 1

由於此鏈接，我找到了解決此問題的方法， 該鏈接解釋了如何獲取復選框值。 此解決方案適用於數組，因此要解決您的問題，您需要以下代碼來打印在submit事件上檢查的每個元素。

var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
   values.push($(this).val());
});

Answer 2

我有解決辦法。

請仔細閱讀代碼以供參考。 查看整頁。

codepen和jsfiddle片段

 // Onclick Filter Slide Right Script Starts $(document).ready(function() { $('#showmenu').click(function() { $('.menu').show("slide"); }); }); // Onclick Filter Slide Right Script Ends // Onclick Dropdown Script Starts Starts jQuery(document).ready(function(e) { function t(t) { e(t).bind("click", function(t) { t.preventDefault(); e(this).parent().fadeOut() }) } e(".dropdown-toggle").click(function() { var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden"); e(".button-dropdown .dropdown-menu").hide(); e(".button-dropdown .dropdown-toggle").removeClass("active"); if (t) { e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active") } }); e(document).bind("click", function(t) { var n = e(t.target); if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide(); }); e(document).bind("click", function(t) { var n = e(t.target); if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active"); }) }); // Onclick Dropdown Script Starts Ends // Onclick Checkbox Display in div and Vice-Varsa Script Starts // $(':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="images/close-button.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'); // } $(function() { $(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>') } }) }) // Onclick Checkbox Display in div and Vice-Varsa Script Ends $(document).ready(function() { $('#show-hidden-menu, #show-hidden-menu1, #show-hidden-menu2, #show-hidden-menu3').click(function() { $('.hidden-menu').show("slow"); // Alternative animation for example // slideToggle("fast"); }); }); $(document).ready(function(){ $(".mode-apply-btn").click(function(){ $(".mode-sec span").css("color", "#26d400"); }); $(".level-apply-btn").click(function(){ $(".level-sec span").css("color", "#26d400"); }); $(".role-apply-btn").click(function(){ $(".role-sec span").css("color", "#26d400"); }); $(".skills-apply-btn").click(function(){ $(".skills-sec span").css("color", "#26d400"); }); $(".button").click(function(){ $(".clear-all").css("display", "inline-block"); }); }); $(".dropdown-menu input:checkbox").on("change", function() { var len = $(".dropdown-menu input[type='checkbox']:checked").length; if(len>0) { $("#general .counter").text('('+len+')'); } else { $("#general .counter").text(' '); } }); $('#filter-submenu').find('.clear-all').prependTo('.hidden-menu>li:last'); // $('.hidden-menu > .clear-all').prepend(""); $('.clear-all').on('click', function () { $('#filter-submenu').empty(); $('.menu .dropdown-menu div input').prop('checked', false); $(".mode-sec span").css("color", "#fff"); $(".level-sec span").css("color", "#fff"); $(".skills-sec span").css("color", "#fff"); $(".role-sec span").css("color", "#fff"); });

 .filter-section { margin-top: 40px; margin-bottom: 40px; } .filter-section .container { margin-right: 100px; margin-left: 100px; padding: 0px; } .filter-section #showmenu { margin: 0px; margin-right: 34px; margin-bottom: 25px; } .filter-section #showmenu a { color: #3f3f3f; width: 102px; font-size: 18px; font-weight: 600; margin: 0px; padding: 0px; cursor: pointer; } .filter-section #showmenu a img{ width:35px } .filter-section .menu { margin-bottom: 25px; display: none; } .filter-section .menu .nav { border-left: 1px solid #3f3f3f; } .filter-section .nav { display: block; margin: 0; padding: 0; height: 24px; } .filter-section .nav li { display: inline-block; list-style: none; } .filter-section .menu .nav .button-dropdown { position: relative; margin-left: 24px; height: 24px; } .filter-section .menu .nav li a { color: #000; background-color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; } .filter-section .menu .nav li a span { font-size: 26px; line-height: 0; height: 24px; margin-right: 10px; color: #fff; } .filter-section .menu .nav li .dropdown-toggle::after { display: inline-block; margin-left: 12px; vertical-align: 2px; content: ""; border-top: 6px solid; border-right: 3px solid transparent; border-bottom: 0; border-left: 3px solid transparent; } .filter-section .menu .nav li .dropdown-menu .dropdown-toggle::after { display: none; margin-left: 12px; vertical-align: 2px; content: ""; border-top: 6px solid; border-right: 3px solid transparent; border-bottom: 0; border-left: 3px solid transparent; } .filter-section .menu .nav li .dropdown-menu { display: none; position: absolute; left: 0; padding: 0; margin: 0; margin-top: 10px; margin-left: 22px; text-align: left; width: 224px; padding: 10px 24px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); background-color: #ffffff; } .filter-section .menu .nav li .dropdown-menu div { border-bottom: 1px solid #000; padding: 12px 0px; } .filter-section .menu .nav li .dropdown-menu div:nth-last-child(2) { border-bottom: none; } .filter-section .menu .nav li .dropdown-menu div:last-child { border-bottom: none; padding-bottom: 10px; padding-top: 20px; } .filter-section .menu .nav li .dropdown-menu div label { margin-bottom: 0px; line-height: 0px; } .filter-section .menu .nav li .dropdown-menu.active { display: block; } .hidden-menu { display: none; } /****************************************/ .listofslect { padding: 0px; } .listofslect li { padding: 10px; font-size: 14px; display: inline-block; -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .name { display: inline-block; font-size: 14px; font-weight: 600; padding: 0; margin: 0; padding-bottom: 14px; padding-top: 10px; } .name input { margin-right: 12px; } .button { border: none; color: white; padding: 14px 0px; text-align: center; font-size: 16px; width: 100%; cursor: pointer; border-radius: 4px; background-color: #000000; } button:focus { outline: 0px dotted; outline: 0px auto -webkit-focus-ring-color; } /**********************************************/ .filter-section #results{ display: none; } .filter-section .hidden-menu { list-style: none; display: inline-block; padding: 0px; margin: 0px; margin-bottom: 25px; } .filter-section .hidden-menu li { padding: 16px 15px; margin: 0px; line-height: 0px; margin-right: 16px; margin-bottom: 16px; float:left; border-radius: 4px; border: solid 1px #ECECEC; background-color: #ECECEC; } .filter-section .hidden-menu li a img { margin-left: 15px; width: 10px; } .filter-section .clear-all{ padding: 8px 0px; border: none; background: #fff; display:none; } .filter-section .clear-all a{ color: #26d400; text-decoration: none; font-size: 16px; font-weight: 600; } /****************************/ /* Hide the browser's default checkbox */ /*label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }*/ /*label input{ margin-right: 12px; }*/ /* Create a custom checkbox */ /*.checkmark { position: absolute; top: 15px; left: 23px; height: 13px; width: 13px; background-color: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); border: 1px solid; border-radius: 0px; }*/ /* On mouse-over, add a grey background color */ /*label:hover input ~ .checkmark { background-color: #fff; }*/ /* When the checkbox is checked, add a blue background */ /*label input:checked ~ .checkmark { background-color: #000; } */ /* Create the checkmark/indicator (hidden when not checked) */ /*.checkmark:after { content: ""; position: absolute; display: none; }*/ /* Show the checkmark when checked */ /*label input:checked ~ .checkmark:after { display: block; }*/ /* Style the checkmark/indicator */ /*label .checkmark:after { left: 4px; top: 0px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); transform: rotate(50deg); }*/ .nav .button-dropdown .dropdown-menu label { display:block } .nav .button-dropdown .dropdown-menu input[type="checkbox"] { position:relative; top:0px; margin-right:12px; -moz-appearance:none; background-color:#dddddd!important; } .nav .button-dropdown .dropdown-menu input[type='checkbox']:after { content:""; vertical-align:middle; -webkit-appearance:none!important; -moz-appearance:none!important; appearance:none!important; background-color:#fff!important; border: 1px solid #000; color:#fff; text-align:center; line-height:15px; position:absolute; cursor:pointer; height:15px; width:15px; left:0;top:0; font-size:11px; background:#fff } .nav .button-dropdown .dropdown-menu input[type='checkbox']:checked:after { background:#000; /*content:'\\f00c';*/ content: url(images/left-arrow-icon.png); color:#000; -webkit-appearance:none!important; -moz-appearance:none!important; background-color:#000!important; color:#fff; font-family:FontAwesome }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <section> <div class="filter-section"> <div class="container d-flex"> <div id="showmenu"> <a id="general"> <img src="https://i.dlpng.com/static/png/5460626-filter-filtering-filters-icon-with-png-and-vector-format-for-filter-png-512_512_preview.png"> Filter <span class="counter"></span></a> </div> <div class="menu"> <ul class="nav"> <li class="button-dropdown"> <a href="javascript:void(0)" class="mode-sec dropdown-toggle"><span>&#8226;</span>Learning Modes</a> <div class="dropdown-menu"> <div> <label><input type="checkbox" class="mainlist" value="test" data-ref="1">test<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label> </div> <div class=""> <button class="button dropdown-toggle mode-apply-btn" id="show-hidden-menu">Apply</button> </div> </div> </li> <li class="button-dropdown"> <a href="javascript:void(0)" class="level-sec dropdown-toggle"><span>&#8226;</span>Level</a> <div class="dropdown-menu"> <div> <label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label> </div> <div class=""> <button class="button dropdown-toggle level-apply-btn" id="show-hidden-menu1">Apply</button> </div> </div> </li> <li class="button-dropdown"> <a href="javascript:void(0)" class="role-sec dropdown-toggle"><span>&#8226;</span>Role</a> <div class="dropdown-menu"> <div> <label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test14" data-ref="14">test14<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test15" data-ref="15">test15<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test16" data-ref="16">test16<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test17" data-ref="17">test17<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test18" data-ref="18">test18<span class="checkmark"></span></label> </div> <div class=""> <button class="button dropdown-toggle role-apply-btn" id="show-hidden-menu2">Apply</button> </div> </div> </li> <li class="button-dropdown"> <a href="javascript:void(0)" class="skills-sec dropdown-toggle"><span>&#8226;</span>Skills</a> <div class="dropdown-menu"> <div> <label><input type="checkbox" class="mainlist" value="test19" data-ref="19">test19<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test20" data-ref="20">test20<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test21" data-ref="21">test21<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test22" data-ref="22">test22<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test23" data-ref="23">test23<span class="checkmark"></span></label> </div> <div> <label><input type="checkbox" class="mainlist" value="test24" data-ref="24">test24<span class="checkmark"></span></label> </div> <div class="" > <button class="button dropdown-toggle skills-apply-btn" id="show-hidden-menu3">Apply</button> </div> </div> </li> </ul> </div> </div> <div class="container d-flex" id="filter-submenu"> <ul class="hidden-menu clearfix" id="results"> </ul> <a id="clear-all-btn" class="col-1 clear-all">Clear all</a> </div> </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>