个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 06:23:13 25 4
gpt4 key购买 nike

I want the final output to be like this. So that I can delete or add as many options from check-box tree as I want.

我创建了一个下拉栏，单击时它也会填充带有子分支的复选框树。现在，我真正想要的是，当我选择复选框树中显示的几个选项时，它们应该填充在顶部下拉栏的顶部，这样我就可以知道，我有在下面显示的复选框树中选择了这些选项。

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

这是我的代码，

<!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“检查”的选定值。此外，我还更改了复选框的值以识别单击的复选框。

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

关于javascript - 显示在复选框树中选择的选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35340349/

25 4 0
文章推荐： javascript - 我可以自动换行以防止出现奇怪的第二行问题吗？
文章推荐： c++ - 在不创建 Functor 类的情况下使用 Functors 时出错？
文章推荐： javascript - jquery从不同页面调用按钮
文章推荐： javascript - Google 图表饼图不完整
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com