javascript - 显示在复选框树中选择的选项-LMLPHP

我创建了一个下拉栏,当单击它时,它也会在子目录中填充复选框树。现在,我真正想要的是,当我选择复选框树中显示的几个选项时,应该将它们填充在顶部下拉栏的顶部,以便我知道在下面显示的复选框树中选择了许多选项。

请任何人通过纠正我的代码中的错误来帮助我。

这是我的代码,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
    .multiselect {
        width: 300px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #checkboxes {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes label {
        display: block;
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
    }
</style>
<body>

<div class="container">
  <form>
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
          <label>Page Permission</label>
            <select>
                <label>Page Permission</label>
            </select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
            <input type="checkbox" name="Page Action1" value="Page"> Page Action 1<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action1" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action1" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action1" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action2" value="Page"> Page Action 2<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action2" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action2" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action2" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action3" value="Page"> Page Action 3<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action3" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action3" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action3" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action4" value="Page"> Page Action 4<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action4" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action4" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action4" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action5" value="Page"> Page Action 5<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action5" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action5" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action5" value="Page1"> Page 3<br>

  </ul>
        </div>
    </div>
</form>


        </div> </div>
</html>
<script>

    var expanded = false;
    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }
</script>

最佳答案

请仔细检查下面添加的代码。我添加了一个额外的div,以显示具有ID“ checks”的选定值。另外,我还更改了复选框的值以标识单击的复选框。

<div class="container">
          <form>
            <div id="checks"></div>
            <div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                  <label>Page Permission</label>
                    <select>
                        <option>Page Permission</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <input type="checkbox" name="Page Action1" value="Page"> Page Action 1<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action1" value="Page11"> Page 1<br>
                            <input type="checkbox" name="Page Action1" value="Page12"> Page 2<br>
                            <input type="checkbox" name="Page Action1" value="Page13"> Page 3<br>

                            </ul>
                            <input type="checkbox" name="Page Action2" value="Page"> Page Action 2<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action2" value="Page21"> Page 1<br>
                            <input type="checkbox" name="Page Action2" value="Page22"> Page 2<br>
                            <input type="checkbox" name="Page Action2" value="Page23"> Page 3<br>

                            </ul>
                            <input type="checkbox" name="Page Action3" value="Page"> Page Action 3<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action3" value="Page31"> Page 1<br>
                            <input type="checkbox" name="Page Action3" value="Page32"> Page 2<br>
                            <input type="checkbox" name="Page Action3" value="Page33"> Page 3<br>

                            </ul>
                            <input type="checkbox" name="Page Action4" value="Page"> Page Action 4<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action4" value="Page41"> Page 1<br>
                            <input type="checkbox" name="Page Action4" value="Page42"> Page 2<br>
                            <input type="checkbox" name="Page Action4" value="Page43"> Page 3<br>

                            </ul>
                        <input type="checkbox" name="Page Action5" value="Page"> Page Action 5<br>
                        <ul class="dropdown">

                        <input type="checkbox" name="Page Action5" value="Page51"> Page 1<br>
                        <input type="checkbox" name="Page Action5" value="Page52"> Page 2<br>
                        <input type="checkbox" name="Page Action5" value="Page53"> Page 3<br>

                        </ul>
                </div>
            </div>
            </form>
    </div>


以下是将在菜单栏顶部显示选中的复选框值的jQuery代码,并在取消选中同一复选框时将其删除。

$(document).ready(function() {
        $(":checkbox").click (function(){
              //alert($(this).val());
              if($(this).prop('checked') == true){
                $("#checks").append(" <span id='"+$(this).val()+"'>"+$(this).val()+"</span>");
              }
              else {
                $("#"+$(this).val()).remove();
              }
            });
        });

10-08 06:03
查看更多