在模态中设置复选框标签的文本

Question

我有一个创建新帖子的模式。我想允许用户选择要共享的部门，因此我使用复选框来选择受众。HTML：<div class="modal fade" id="createNewPostModal">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">            <h4 class="modal-title">Create New Post</h4>            <button type="button" class="close" data-dismiss="modal">&times;</button>            </div>            <div class="modal-body">                <div class="container">                    <form method="post" id="createNewPostForm">                        <textarea rows="3" name="text" placeholder="Write something..."></textarea>                        <div>                            <p>Select audience to share</p>                            <div>                                <input type="checkbox" id="depACheckBox">                                <label id="depACheckBoxLabel" for="depACheckBox"></label>                                <input type="checkbox" id="depBCheckBox" >                                <label id="depBCheckBoxLabel" for="depBCheckBox"></label>                                <input type="checkbox" id="depCCheckBox">                                <label id="depCCheckBoxLabel" for="CheckBox"></label>                            </div>                        </div>                        <button type="submit" class="btn btn-success" onclick="return createNewPost(this.parentNode);" id="createNewPostButton" data-dismiss="modal">Share</button>                    </form>                </div>            </div>        </div>    </div></div>不同的用户有不同的部门要显示，它们保存在mongoDB用户文档中。我需要在加载模式时设置复选框的标签。我也尝试了innerHTML，但标签仍然为空。如何在模式显示时或之后设置标签文本？

Answer 1

如果您调用onload除此之外的任何内容都window不会产生任何效果。

如果您想在运行函数之前检查#createNewPostModaldiv，您可以执行如下示例所示的操作：

$(document).ready(checkModal);

function checkModal () {

  if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page

    document.getElementById('depACheckBoxLabel').innerHTML = "this";

    document.getElementById('depBCheckBoxLabel').innerHTML = "works";

    document.getElementById('depCCheckBoxLabel').innerHTML = "now";

  } 

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="createNewPostModal">

  <p>Select audience to share</p>

  <div>

    <input type="checkbox" id="depACheckBox">

    <label id="depACheckBoxLabel" for="depACheckBox"></label>

    <input type="checkbox" id="depBCheckBox">

    <label id="depBCheckBoxLabel" for="depBCheckBox"></label>

    <input type="checkbox" id="depCCheckBox">

    <label id="depCCheckBoxLabel" for="CheckBox"></label>

  </div>

</div>

在引用该容器时，请随意调整检查:visible以适合您的需要。

此外，根据您的评论中的要求，如果您想调用此函数，onclick可以执行以下操作：

$('button').click(checkModal);

function checkModal () {

  if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page

    document.getElementById('depACheckBoxLabel').innerHTML = "this";

    document.getElementById('depBCheckBoxLabel').innerHTML = "works";

    document.getElementById('depCCheckBoxLabel').innerHTML = "now";

  } 

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="createNewPostModal">

  <p>Select audience to share</p>

  <div>

    <input type="checkbox" id="depACheckBox">

    <label id="depACheckBoxLabel" for="depACheckBox"></label>

    <input type="checkbox" id="depBCheckBox">

    <label id="depBCheckBoxLabel" for="depBCheckBox"></label>

    <input type="checkbox" id="depCCheckBox">

    <label id="depCCheckBoxLabel" for="CheckBox"></label>

  </div>

</div>

<button onclick="checkModal()">Click</button>

只需交换button您想要触发该功能的任何元素即可。

---

最后，如果不需要等待#createNewPostModaldiv 加载，那么只需像这样调用你的函数，它应该可以工作：

$(document).ready(function() { document.getElementById('depACheckBoxLabel').innerHTML = window.user.depA.name; document.getElementById('depBCheckBoxLabel').innerHTML = window.user.depB.name; document.getElementById('depCCheckBoxLabel').innerHTML = window.user.depC.name; });