提交按钮后显示复选框值

【问题标题】：Display Checkbox values after submit button提交按钮后显示复选框值
【发布时间】：2020-02-24 09:41:51
【问题描述】：

我正在尝试实现一个过滤器。选中复选框时，提交后，选中的值应显示在 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 代码。

【问题讨论】：

    标签： javascript jquery css checkbox


    【解决方案1】：

    感谢this link，我找到了解决此问题的方法，它解释了如何获取复选框值。此解决方案适用于数组，因此要解决您的问题，您需要下面的代码来打印在 submit 事件上检查的每个元素。

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

    【讨论】：

    • 虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
    • 包含代码，感谢您帮助社区提供这些提示 :)
    【解决方案2】：

    我已经找到了解决方案。

    请浏览代码以供参考。整页查看。

    codepen 和 jsfiddle sn-ps 

    // 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>

    【讨论】：

      猜你喜欢
      • 2018-12-13
      • 1970-01-01
      • 2023-03-28
      • 2015-10-14
      • 2014-05-13
      • 1970-01-01
      • 1970-01-01
      • 2021-12-18
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode