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

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 () {&nbsp; if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page&nbsp; &nbsp; document.getElementById('depACheckBoxLabel').innerHTML = "this";&nbsp; &nbsp; document.getElementById('depBCheckBoxLabel').innerHTML = "works";&nbsp; &nbsp; document.getElementById('depCCheckBoxLabel').innerHTML = "now";&nbsp; }&nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="modal fade" id="createNewPostModal">&nbsp; <p>Select audience to share</p>&nbsp; <div>&nbsp; &nbsp; <input type="checkbox" id="depACheckBox">&nbsp; &nbsp; <label id="depACheckBoxLabel" for="depACheckBox"></label>&nbsp; &nbsp; <input type="checkbox" id="depBCheckBox">&nbsp; &nbsp; <label id="depBCheckBoxLabel" for="depBCheckBox"></label>&nbsp; &nbsp; <input type="checkbox" id="depCCheckBox">&nbsp; &nbsp; <label id="depCCheckBoxLabel" for="CheckBox"></label>&nbsp; </div></div>在引用该容器时，请随意调整检查:visible以适合您的需要。此外，根据您的评论中的要求，如果您想调用此函数，onclick可以执行以下操作：$('button').click(checkModal);function checkModal () {&nbsp; if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page&nbsp; &nbsp; document.getElementById('depACheckBoxLabel').innerHTML = "this";&nbsp; &nbsp; document.getElementById('depBCheckBoxLabel').innerHTML = "works";&nbsp; &nbsp; document.getElementById('depCCheckBoxLabel').innerHTML = "now";&nbsp; }&nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="modal fade" id="createNewPostModal">&nbsp; <p>Select audience to share</p>&nbsp; <div>&nbsp; &nbsp; <input type="checkbox" id="depACheckBox">&nbsp; &nbsp; <label id="depACheckBoxLabel" for="depACheckBox"></label>&nbsp; &nbsp; <input type="checkbox" id="depBCheckBox">&nbsp; &nbsp; <label id="depBCheckBoxLabel" for="depBCheckBox"></label>&nbsp; &nbsp; <input type="checkbox" id="depCCheckBox">&nbsp; &nbsp; <label id="depCCheckBoxLabel" for="CheckBox"></label>&nbsp; </div></div><button onclick="checkModal()">Click</button>只需交换button您想要触发该功能的任何元素即可。最后，如果不需要等待#createNewPostModaldiv 加载，那么只需像这样调用你的函数，它应该可以工作：$(document).ready(function()&nbsp;{&nbsp;document.getElementById('depACheckBoxLabel').innerHTML&nbsp;=&nbsp;window.user.depA.name;&nbsp;document.getElementById('depBCheckBoxLabel').innerHTML&nbsp;=&nbsp;window.user.depB.name;&nbsp;document.getElementById('depCCheckBoxLabel').innerHTML&nbsp;=&nbsp;window.user.depC.name;&nbsp;});