亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在模態中設置復選框標簽的文本

在模態中設置復選框標簽的文本

紅糖糍粑 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 關注
  • 185 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號