问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于label input，checkbox实现功能开关的问题

头像
hope_pdm
    23611

    我的思路是这样的，先从xml中读取布尔值，确定checked的状态，然后依据checked的状态来隐藏或者显示某个div。

    <html>
<body>
<div>
    <form>
        <label for="map">
            <input type="checkbox" name="sex" id="map" />
            <i></i>
            Map
        </label>
    </form>
</div>
<!--需隐藏或显示的div-->
<div id="map"></div>
</body>
</html>

    clipboard.png

    遇到的问题有两个：1、我修改了checkbox的样式，样式背景在i标签上定义。我是通过css样式中input：checked来判断是否选中的，于是后面我遇到了事件绑定错误。
    2 我希望id="ohh"的显示或者隐藏直接与checked状态挂钩，选中时显示，没选中时隐藏。这个地方似乎涉及双向绑定，但是我暂时不会。。。。

    javascripthtml
    阅读 4.6k
    2 个回答
    得票最新
    头像
    小丑
      9171114

      js监听input，如果选中就显示，反之隐藏，逻辑没错

      <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>practie</title>
        <style>
            #map{
                width: 100px;
                height: 100px;
                background-color: #473C8B;
            }
        </style>
    </head>

    <body>
        
            <form>
                <label for="map">
                    <input type="checkbox" name="sex" id="input" />
                    <i> Map</i>
                   
                </label>
            </form>
        
        <!--需隐藏或显示的div-->
        <div id="map"></div>
    </body>
    <script>
        window.onload = function(){
            var inputs = document.getElementById("input");
            var maps = document.getElementById("map")
            isShow();
            inputs.addEventListener("change",isShow);
            function isShow(){
        
                if(inputs.checked){
                    maps.style.display = "block";
                }else{
                    maps.style.display = "none";
                }
            }
        }
    </script>

</html>
      头像
      hope_pdm
        23611

        谢谢，我已经知道怎么弄啦

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题