当我动态创建一行时，如果选中了“AutoInclude all in Group”复选框，则需要选中该行中的复选框。行和它的复选框创建得很好，当我单步执行代码时，我看到我试图分配给复选框的checked值是正确的，但是设置checkbox checked属性不起作用。我知道这可能是DOM的问题。我已经在添加表行时查找了一个事件，以便可以添加一个侦听器来选中此时的复选框，但找不到该事件。
请看我的代码和建议。我很感激任何关于这方面的投入！
addUserToGroup(groupName) {
var userEmail = document.getElementById(groupName + "_userLookupEmail").value;
var groupCheckBox = document.getElementById(groupName + '_checkbox');
if (userEmail == '') {
return alert("No user selected from Users Search Box.")
}
var table = document.getElementById(groupName);
var row;
var cell_item;
var cell_autoInclude;
var cellTrash;
var returnValue = this.VerifyUserIsNotAlreadyInGroup(groupName, userEmail);
if (returnValue == "") {
// create new row at desired position
// using length -2 because the last row is a checkbox to make entire group autocomplete, and want to insert above that
row = table.getElementsByTagName('tbody')[0].insertRow(table.rows.length - 2)
// Insert new cells (<td> elements) at the <tr> element:
cell_item = row.insertCell(0);
cell_item.innerHTML = userEmail;
document.getElementById(groupName + "_userLookup").value = "";
document.getElementById(groupName + "_userLookupEmail").value = "";
cell_autoInclude = row.insertCell(1);
//TODO Karrie - 07/18/23 Need to fix the fact that the checked state is not holding for the checkbox
cell_autoInclude.innerHTML = "<span style='display: block; text-align: center; padding-top: 0px;'><label class='label' style='margin-left: 0px'><input id='" + groupName
+ '-' + userEmail + '_checkbox' + "' type=checkbox checked='" + groupCheckBox.checked + "' style='margin-left: 0px'></label></span>";
cellTrash = row.insertCell(2);
cellTrash.innerHTML = "<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'><i id='"
+ groupName + 'x' + userEmail + '_trash' + "' class='fa fa-trash' style='margin-left: 0')></i></span>"
}字符串
模板：
<template id="email-template">
<div class="container border col-md-12" style="margin-top:10px;">
<tabs style="padding-top:10px;">
<tab title="Task Summary">
<table id="emailGroupsTable" class="table userForm" style="margin-bottom:0px">
<!--class userForm must be here for nedLookup!!-->
<thead>
<tr>
<th>Email Groups</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<template v-for="emailGroupMembers in emailGroupMembersAllList">
<tr class="emailGroup-header" @click="toggleEmailGroup(emailGroupMembers.EmailGroup.Id)" :title="`Click to collapse/expand the ${emailGroupMembers.EmailGroup.GroupName} Email Group`">
<td colspan="5"><b>{{emailGroupMembers.EmailGroup.GroupName}}</b> <i :class="['fa', opened.includes(emailGroupMembers.EmailGroup.Id) ? 'fa-chevron-down' : 'fa-chevron-up']"></i></td>
</tr>
<tr v-if="opened.includes(emailGroupMembers.EmailGroup.Id)">
<td class="col-md-5">
<table style="width:100%">
<tr>
<td>
<table :id="emailGroupMembers.EmailGroup.GroupName" class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 10%">{{emailGroupMembers.EmailGroup.GroupName}} Members</th>
<th style="width: 10%; text-align: center;">AutoInclude</th>
<th style="width: 10%; text-align: center;">Delete</th>
</tr>
</thead>
<tr v-for="user in emailGroupMembers.EmailGroup.EmailGroupUsers">
<td class="col-md-8">{{user.Email}}</td>
<td class="userEmail col-md-2">
<span style='display: block; text-align: center; padding-top: 0;'>
<label class="label" style='margin-left: 0'>
<input :id="emailGroupMembers.EmailGroup.GroupName + '-' + user.Email + '_checkbox'" type="checkbox"
:checked="user.AutoInclude" style='margin-left: 0'
@click="manageIndividualCheckboxSelect(emailGroupMembers.EmailGroup.GroupName + '-' + user.Email)">
</label>
</span>
</td>
<td class="col-md-2">
<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'>
<i :id="emailGroupMembers.EmailGroup.GroupName + 'x' + user.Email + '_trash'" class='fa fa-trash' style='margin-left: 0'></i>
</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>
<input :id="emailGroupMembers.EmailGroup.GroupName + '_checkbox'" type="checkbox"
:checked="emailGroupMembers.EmailGroup.AutoInclude"
@click="manageGroupCheckboxSelect(emailGroupMembers.EmailGroup.GroupName)"> AutoInclude Entire Group
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col-md-5">
<table style="width:100%;">
<tr>
<td>
<table style="margin-bottom:20px">
<tr>
<td class="col-md-4" style="padding-right:5px">
<label style="display: inline-block;">Group Name:</label>
<input :id="emailGroupMembers.EmailGroup.GroupName + '_name'" type="text" :value="emailGroupMembers.EmailGroup.GroupName" style="width:100%" class="form-control" />
</td>
<td class="col-md-8">
<label>Group Description:</label>
<input :id="emailGroupMembers.EmailGroup.GroupDescription + '_description'" type="text" :value="emailGroupMembers.EmailGroup.GroupDescription" style="width:100%" class="form-control" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="col-md-10">
<label>User Lookup</label>
<input type="text" :id="emailGroupMembers.EmailGroup.GroupName + '_userLookup'"
:name="emailGroupMembers.EmailGroup.GroupName + '_userLookup'" value=""
class="nedLookup form-control"
placeholder="Last Name, FirstName" />
<input :id="emailGroupMembers.EmailGroup.GroupName + '_userLookupEmail'" type="hidden" data-ned="Email" />
</td>
<td class="col-md-2">
<button type="button" style="margin-top:24px" class="btn btn-primary" @click="addUserToGroup(emailGroupMembers.EmailGroup.GroupName)" role="button">
Add User to Group
</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col-md-1" style="vertical-align:bottom">
<button type="button" class="btn btn-danger" @click="deleteGroup(emailGroupMembers.EmailGroup)" role="button">
Delete Group
</button>
</td>
<td class="col-md-1" style="vertical-align:bottom">
<button type="button" class="btn btn-primary" @click="saveExistingGroup(emailGroupMembers.EmailGroup)" role="button">
Save Group
</button>
</td>
</tr>
</template>
</tbody>
</table>
<div class="text-center" style="border-top:solid; border-width: thin; border-color:gainsboro">
<btn type="button" class="btn btn-primary" style="margin-bottom:10px; margin-top:10px" @click="addNewEmailGroup" role="button"><i class="fa fa-plus-circle"></i> Add Email Group </btn>
</div>
</tab>
<!-- Survey Email settings-->
<tab title="Survey">
<table class="table">
<thead>
<tr>
<th>Coming Soon</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</tab>
</tabs>
</div>
</template>
<style scoped>
.emailGroup-header {
cursor: pointer;
}
.emailGroup-header:hover {
background-color: #E7E7E7;
}
.trash-icon i {
color: #e74c3c;
cursor: pointer;
}
</style>型
我需要设置动态添加的行内的动态添加的复选框，以检查，基于组的复选框检查值。
1条答案
按热度按时间dba5bblo1#
要根据组的复选框checked值将动态添加行中的动态添加复选框设置为checked，您应该首先检查“AutoInclude all in Group”复选框（groupCheckBox.checked）的状态，然后使用该值设置动态创建复选框的“checked”属性。
看起来您已经在代码中尝试这样做了，但是在如何设置动态创建的复选框的“checked”属性方面有一个小问题。在HTML中，要使复选框选中，只需添加checked属性，而不添加任何值。在您提供的代码中，您正在使用checked ='“+ groupCheckBox.checked +“'，这是不需要的，可能会导致问题。
让我们修改代码的相关部分：
字符串
通过使用三元运算符${groupCheckBox.checked？'checked'：''}，当groupCheckBox.checked为true（选中）时，我们将checked属性添加到复选框中，当groupCheckBox.checked为false（未选中）时，我们省略该属性。这样，动态创建的复选框将根据“自动包含组中的所有内容”复选框的状态被选中或取消选中。
通过此修改，动态添加行内的动态创建的复选框应根据组复选框的状态正确地选中或取消选中。