时间戳

首页 > 解决方案 > 在选择复选框下拉菜单中选择复选框下拉菜单？

javascript - 在选择复选框下拉菜单中选择复选框下拉菜单？

问题描述

我想再次在 Select Checkbox 下拉菜单下创建一个 Select checkbox 列表。我需要做什么？

我需要的样品

☑ C 1 : name

       ☐ C 1.1 : name

       ☑ C 1.2 : name

☐ C2 : name

☐ C3 : name

我的代码

表单视图

     <label>Standard List</label>
            <select type="button"id="framework" name="framework[]" multiple class="form-control" >
            <option class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="Codeigniter">Codeigniter</option>
            <option value="CakePHP">CakePHP</option>
            <option value="Laravel">Laravel</option>
            <option value="YII">YII</option>
            <option value="Zend">Zend</option>
            <option value="Symfony">Symfony</option>
            <option value="Phalcon">Phalcon</option>
            <option value="Slim">Slim</option>
            </select>

JS：

      $(document).ready(function(){
     $('#framework').multiselect({
    nonSelectedText: 'Choose...',
     enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
   buttonWidth:'400px'
   });
  });

标签： javascripthtmlcheckboxselect-options

解决方案

不使用 JQuery：（只是 DOM）

HTML：

<!--------C1------------>
<input type="checkbox" id="c1" onclick="check()">
<label>C 1</label><br>
<div id="c1-hidden" style="display:none">
    &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
    <label>C 1.1</label><br>
     &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
<label>C 1.2</label>
</div>

<!--------C2------------->
<input type="checkbox" id="c2" onclick="check()">
<label>C 2</label><br>
<div id="c2-hidden" style="display:none">
    &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
    <label>C 2.1</label><br>
     &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
<label>C 2.2</label>
</div>

<!--------C3------------->
<input type="checkbox" id="c3" onclick="check()">
<label>C 3</label>
<div id="c3-hidden" style="display:none">
    &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
    <label>C 3.1</label><br>
     &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
<label>C 3.2</label>
</div>

Javascript：

<script>
var checkboxes = ["c1","c2","c3"];
function check(){
    checkboxes.forEach(item=>{
        if(document.getElementById(item).checked==true){
            document.getElementById(item+"-hidden").style.display = "block";
        }else{
document.getElementById(item+"-hidden").style.display = "none";
        }
    });
}

</script>

希望这可以帮助 ：）

推荐阅读