在选择一个复选框时，勾选另一个 div 的复选框
Posted
技术标签:
【中文标题】在选择一个复选框时，勾选另一个 div 的复选框【英文标题】：On selecting a checkbox, tick checkboxes of another div 【发布时间】：2021-08-28 02:01:59 【问题描述】：我有一个动态网格。网格的结构如下：
Serial No Document Name Attachment
1(checkbox) abc (img)
2(checkbox) xyz (img)
3(checkbox) uio (img)
4(checkbox) pop (img)
每个序列号都有一个复选框。在附件列中，当您单击图像时，它会打开一个对话框，显示针对此文档名称附加的文件。每个附件还有一个复选框。
此对话框在单击功能时打开，并且来自另一个动态网格。
我想要做的是，如果我对序列号 1 选择复选框，它应该检查相同序列号对话框中的所有复选框。所以基本上序列号复选框是父复选框，对话框中的复选框将是它们的子复选框。
现在如果用户选中了父复选框，对话框中的复选框将被自动选中，但如果用户取消选中该对话框中的所有复选框，则父复选框也应自动取消选中。
我如何做到这一点？
自过去 4 小时以来，我已经尝试了很多示例代码，但都是徒劳的。我试过这样做
下面是代码
$('.activity_selection').live('click', function (e)
var table = $(e.target).closest('table');
$('td input:checkbox', table).attr('checked', e.target.checked);
);
.activity_selection 是我为针对序列号的复选框提供的一个类。 但是它会针对所有从 1 到 4 的序列号选择所有复选框。我想要的是它只检查当前对话框中的复选框？如何使用 javascript 或 jquery 实现这一点？我有许多其他示例代码，但它不起作用。请帮忙。
主网格的html：
<table class="display" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No
</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701">
<td class="GreyBorder">1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</tr>
</table>对话框：
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection'>
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</div>
</td>
</a>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78424 class='attachment_selection'>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>FOSUNDERSTANDING.docx</p>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</div>
</td>
</a>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>谁能帮帮我？
【问题讨论】：
使用 JS 选择 div 并使其“checked”属性为真。document.querySelector("#id").checked = true
嗨，dialog box 在哪里？
@AhsanKhan 我只想选中相关对话框中的复选框。
@Swati 编辑了我的问题。你能帮忙吗？
所以onclick="AttchmentBox('_41701','2',this);" 对话框的点击打开了？如果是，请同时显示您的功能代码。
【参考方案1】：
在您的函数调用中，您也传递了this，因此这将帮助我们确定该行中的复选框是否为checked。因此，在生成所有 html 后，在 AttchmentBox 内部，您可以选中 sno 复选框，如果选中，您可以选中 AttachmentGrid 表中的所有其他复选框。
然后，如果您的AttachmentGrid 表中未选中任何复选框，您可以使用在每个tr 中设置的cdCode 来获取我们需要选中或未选中复选框的复选框的引用。
演示代码：
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function()
var total = $(".attachment_selection").length //get length of checked
var get_code = $("#AttachmentGrid").data("code").split("_")[1] //get code...
//if all checked..
if ($(".attachment_selection:checked").length == total)
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true) //sno checkbox checked
else
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false) //remove checbox..
)
function AttchmentBox(id, count, el)
//id = _41702 ,_41701..accroding to click
//el = this
if (parseInt(count) > 0)
//some code..where you add data inside your attachmnt grid,,
//...
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
//if checked in tr..
if ($(el).closest("tr").find(".activity_selection").is(":checked"))
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true) //make checked in dialog as well
$("#attchment_div #AttachmentGrid").data("code", id) //set this attr
$("#attchment_div").show() //show your dialog it..(demo..)//showPopup('attchment_div', true);
#attchment_div
display: none;
border: 1px solid black
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702" mandatory="N">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection'>
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input
type='checkbox'
id=chkAttachment_78424
class='attachment_selection'
>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
</div>【讨论】：
您的代码适用于对话框中的复选框在选择序列号时勾选但反向不起作用的部分。这可能是由于我在 (document).on("change", "#AttachmentGrid .attachment_selection", function () Object does not support propoerty on. 如果你能帮我解决这个问题，我会标记这个作为答案。@Swati 另外，您使用的是哪个 jquery 版本？ 错误消失了，但是当取消选中对话框中的复选框时，不会取消选中针对序列号的复选框。 @斯瓦蒂 doconsole.log(get_code) 看看它打印了什么，并将你的 id 和 classes 与我的代码匹配。
3.4.1 版本的 jquery 我正在使用@Swati【参考方案2】：
我编辑了我的答案，你可以试试这个
function AttchmentBox(id, count, x)
if (parseInt(count) > 0)
var idArray = id.split('_');
var cdCode = idArray[1];
var type = idArray[0];
var title = $('#' + cdCode).text()
var AJAX = new AJAXsupport();
AJAX.resetVar();
AJAX.addData('CLDone', 'CustomerDocument');
AJAX.addData('type', type);
AJAX.addData('CdCode', cdCode);
var sucSave = function()
$('#attchment_div_data').html(AJAX.getExtraData('Customerattchment'));
$('#attchment_div').dialog(
autoOpen: false,
resizable: false,
height: 250,
width: 500,
title: title,
modal: true
);
if ($(x).parent().parent().parent().find('td:first input[type=checkbox]').prop('checked'))
$('#attchment_div').find('table input[type=checkbox]').prop('checked', '1');
$CRM_juery("#attchment_div").mCustomScrollbar(
scrollButtons:
enable: true,
scrollType: "stepped"
,
keyboard:
scrollType: "stepped"
,
mouseWheel:
scrollAmount: 188
,
theme: "rounded-dark",
autoExpandScrollbar: true,
snapAmount: 188,
snapOffset: 65
);
showPopup('attchment_div', true);
customSave(AJAX, sucSave);
【讨论】：
您的代码在针对标题 Sno 选择父复选框时，会勾选所有针对序列号 1 和 2 的复选框。但是，我需要的是，如果我针对 serail 编号 1（字母）选择复选框，则还应选中对话框中的复选框。 @Shiz @Unknown 如果你能说明AttchmentBox('_41702','1',this); 是如何形成的以及它的作用，我可能会得到一个更好的答案。
通过在我的函数中添加这两行代码，我的对话框无法打开。 @Shiz
@Unknown 我还在function AttchmentBox(id, count, x) 中添加了x参数
我是否也必须像这样调用我的点击功能？ ``附件框（'_41702','1',this,x）``2以上是关于在选择一个复选框时，勾选另一个 div 的复选框的主要内容，如果未能解决你的问题，请参考以下文章
在 NSUserDefaults 中保存复选标记 - 动态 TableView