时间戳

首页 > 解决方案 > 为什么单击元素会提示单击它旁边的复选框？

javascript - 为什么单击元素会提示单击它旁边的复选框？

问题描述

我有以下代码，其中包含打开模式窗口的问号和右侧带有自己标签的复选框。我的问题是，每次我点击问号打开模态窗口时，我发现复选框也被点击了。


<!DOCTYPE html  >
<html lang="en" style="background:  #fffff0;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" media="all" href="upload.css">
        <script type=text/javascript src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>
<body ><div class="form-group">
                        <label class="control-label col-md-4 col-lg-3" for="vertreterCheckbox" id="vertreterLbl">
                            <div class="inline-help form-label" data-help="&lt;b&gt;Sie
  &lt;/div&gt;
" data-heading="Wie kann ich verdeutlichen, dass ich lediglich als Stellvertreter auftrete?" data-help-key="offers.deputy"><i onClick="keyDown(vertreterModal);myFunction('vertreterModal','vertreterOK')"  class="fa fa-question-circle-o" id="vertreterHilfe"></i></div>in Vertretung</label>
                        <div class="col-md-8 col-lg-9">
                            <div class="checkbox">
                                <input name="offer[deputy]" type="hidden" value="0">
                                <input type="checkbox" value="1" name="offer[deputy]" id="vertreterCheckbox">
                                <label for="vertreterCheckbox"  id="vertreterCheckboxLbl">in Vertretung</label>
                            </div>
                        </div>
                    </div>    


    <script src="uploadScript.js" data-turbolinks-track="reload"></script>

</body>
</html>

我尝试使用以下 .js 代码将复选框恢复到以前的状态：

if(event.target.id==="vertreterHilfe"){
        if(document.getElementById("vertreterCheckbox").checked===true){
            document.getElementById("vertreterCheckbox").checked=false
        }else{
                        document.getElementById("vertreterCheckbox").checked=true

        }
    }

但我并不真正了解 html/javascript 编程，并且觉得这不是一个很好的解决方案。我宁愿找出导致问题行为的原因并改变它，而不是一个肮脏的解决方法。我该怎么做？

标签： javascripthtml

解决方案

您的label元素有for="vertreterCheckbox"并且您的复选框有id="vertreterCheckbox". 这将它们链接在一起，告诉浏览器单击标签应该切换复选框。

您那里也有无效的标记。你不能有一个内部a 。的内容模型是短语内容；s 允许出现在流动和明显的内容中，而不是短语内容。这意味着浏览器可以重新组织它认为合适的东西以尝试使其有效，这可能不是您想要的方式。移出. _ _div labellabeldivdiv label

推荐阅读