为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

红糖糍粑 2023-08-24 18:22:14
我有一个创建新帖子的模式。我想允许用户选择要共享的部门,因此我使用复选框来选择受众。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,但标签仍然为空。如何在模式显示时或之后设置标签文本?
查看完整描述

1 回答

?
哆啦的时光机

TA贡献1779条经验 获得超6个赞

如果您调用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; });



查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 96 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信