首頁猿問在模態(tài)中設(shè)置復(fù)選框標(biāo)簽的文本

在模態(tài)中設(shè)置復(fù)選框標(biāo)簽的文本

JavaScript

紅糖糍粑 2023-08-24 18:22:14

我有一個(gè)創(chuàng)建新帖子的模式。我想允許用戶選擇要共享的部門，因此我使用復(fù)選框來選擇受眾。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">×</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用戶文檔中。我需要在加載模式時(shí)設(shè)置復(fù)選框的標(biāo)簽。我也嘗試了innerHTML，但標(biāo)簽仍然為空。如何在模式顯示時(shí)或之后設(shè)置標(biāo)簽文本？

查看完整描述

1 回答

哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

如果您調(diào)用onload除此之外的任何內(nèi)容都window不會產(chǎn)生任何效果。

如果您想在運(yùn)行函數(shù)之前檢查#createNewPostModaldiv，您可以執(zhí)行如下示例所示的操作：

$(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";

}

<p>Select audience to share</p>

<div>

</div>

在引用該容器時(shí)，請隨意調(diào)整檢查:visible以適合您的需要。

此外，根據(jù)您的評論中的要求，如果您想調(diào)用此函數(shù)，onclick可以執(zhí)行以下操作：

$('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";

}

<p>Select audience to share</p>

<div>

</div>

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

只需交換button您想要觸發(fā)該功能的任何元素即可。

最后，如果不需要等待#createNewPostModaldiv 加載，那么只需像這樣調(diào)用你的函數(shù)，它應(yīng)該可以工作：

$(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; });

反對回復(fù) 2023-08-24