在选择一个复选框时，勾选另一个 div 的复选框 [英] On selecting a checkbox, tick checkboxes of another div
问题描述
我有一个动态网格.网格结构如下:
序列号无文件名附件1(复选框) abc (img)2(复选框) xyz (img)3(复选框) uio (img)4(复选框)弹出(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:
<头><tr><th class="Greyheader"><input type='checkbox' id='selectAll'><br/>S.No</th><th class="Greyheader">文档名称</th><th class="Greyheader">浏览</th><th class="Greyheader">附件</th><th class="Greyheader">保存</th></tr></thead><td class="GreyBorder">1 <input type='checkbox' id=chk_517 class='activity_selection'></td><td class="GreyBorder"><span>信</span></td><td class="GreyBorder" style=" text-align:center !important;"><输入类型=文件"多个=多个"名称="txt_filePath_517"类=中文本字段"id="txt_filePath_517"样式=宽度:78%；"></td><td class="GreyBorder" style=" text-align:center !important;"对齐=中心"><span style="cursor:hand"><span class="attch_counter">2</span><td class="GreyBorder">2 <input type='checkbox' id=chk_518 class='activity_selection'></td><td class="GreyBorder"><span>客户</span></td><td class="GreyBorder" style=" text-align:center !important;"><输入类型=文件"多个=多个"名称="txt_filePath_518"类=中文本字段"id="txt_filePath_518"样式=宽度:78%；"></td><td class="GreyBorder" style=" text-align:center !important;"对齐=中心"><span style="cursor:hand"><span class="attch_counter">1</span>对话框:
<tr><td style="text-align:left; width:40%;"><input type='checkbox' id=chkAttachment_78427 class='attachment_selection'><img src='../../Images/attchments.png'><p>ABC.docx</p></td><td style="text-align:center; width:35%;"><div style='float:left;position:relative;top:-6px;'>
<span class='day'>10</span><span class='month'>Jun</span><span class='year'>2021</span></td></a><td style="width:20%; cursor:hand;"><img src='../../Images/attchments.png'><p>FOSUNDERSTANDING.docx</p></td><td style="text-align:center; width:35%;"><div style='float:left;position:relative;top:-6px;'>
<span class='day'>09</span><span class='month'>Jun</span><span class='year'>2021</span></td></a><td style="width:20%; cursor:hand;">
有人可以帮我吗?
解决方案 在你的函数调用中，因为你已经传递了 this ，所以这将帮助我们找到该行中的复选框是否为 checked 与否.因此，在生成所有 html 后，在 AttchmentBox 内，您可以选中 sno 复选框，如果选中，您可以选中 AttachmentGrid 表中的所有其他复选框.
然后，如果在您的 AttachmentGrid 表中取消选中任何复选框，您可以使用在每个 tr 中设置的 cdCode 来获取参考我们需要选中或取消选中复选框的复选框.
演示代码:
//更改表格内的复选框时..$(document).on("change", "#AttachmentGrid .attachment_selection", function() {var total = $(".attachment_selection").length//获取选中的长度var get_code = $("#AttachmentGrid").data("code").split("_")[1]//获取代码...//如果全部检查..if ($(".attachment_selection:checked").length == total) {$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true)//sno 复选框被选中} 别的 {$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false)//移除复选框..}})函数 AttchmentBox(id, count, el) {//id = _41702 ,_41701..accroding点击//el = 这个如果(parseInt(计数)> 0){//一些代码..在你的attachmnt网格中添加数据的地方，，//...$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)//如果签入tr..if ($(el).closest("tr").find(".activity_selection").is(":checked")) {$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true)//在对话框中也进行检查}$("#attchment_div #AttachmentGrid").data("code", id)//设置这个属性$("#attchment_div").show()//显示你的对话框..(demo..)//showPopup('attchment_div', true);}}
#attchment_div {显示:无；边框:1px纯黑色}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><table class="display" width="100%" id="uploadGrid"><头><tr><th class="Greyheader"><input type='checkbox' id='selectAll'><br/>S.No</th><th class="Greyheader">文档名称</th><th class="Greyheader">浏览</th><th class="Greyheader">附件</th><th class="Greyheader">保存</th></tr></thead><tr id="517" cdCode="41701" required="N"><td class="GreyBorder">1 <input type='checkbox' id=chk_517 class='activity_selection'></td><td class="GreyBorder"><span>信</span></td><td class="GreyBorder" style=" text-align:center !important;"><输入类型=文件"多个=多个"名称="txt_filePath_517"类=中文本字段"id="txt_filePath_517"样式=宽度:78%；"></td><td class="GreyBorder" style=" text-align:center !important;"对齐=中心"><span style="cursor:hand"><span class="attch_counter">2</span><span style="cursor:hand"><span class="attch_counter">1</span><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'><img src='../../Images/attchments.png'>
<p>ABC.docx</p>
</a></td><td style="text-align:center; width:35%;"><div style='float:left;position:relative;top:-6px;'>
<span class='day'>10</span><span class='month'>Jun</span><span class='year'>2021</span></td><td style="width:20%; cursor:hand;"><img src='../../Images/attchments.png'/>
<p>FOSUNDERSTANDING.docx</p>
</a></td><td style="text-align:center; width:35%;"><div style='float:left;position:relative;top:-6px;'>
<span class='day'>09</span><span class='month'>Jun</span><span class='year'>2021</span></td><td style="width:20%; cursor:hand;">
I have a dynamic grid. The structure of the grid is as follows:
Serial No Document Name Attachment
1(checkbox) abc (img)
2(checkbox) xyz (img)
3(checkbox) uio (img)
4(checkbox) pop (img)
Against every serial number, there is a checkbox. And in the attachment column when you click the image it opens a dialog box that shows the files attached against this document name. Each attachment also has a checkbox against it.
This dialog box opens on an on click function and comes from another dynamic grid.
What I want to do is that if I select checkbox against serial no 1, it should check all checkboxes in the dialog box of the same serial number . so basically the serial number checkboxes is a parent checkbox and the checkboxes in the dialog box will be their child checkboxes.
Now if the user has checked a parent checkbox, the checkboxes in dialog box will be automatically checked, but if the user unchecks all checkboxes in that dialog box then parent checkbox should also be unchecked automatically.
How do I achieve this?
I have tried so many sample codes since last 4 hours but in vain. I tried doing this
Below is the code
$('.activity_selection').live('click', function (e) {
var table = $(e.target).closest('table');
$('td input:checkbox', table).attr('checked', e.target.checked);
});
.activity_selection is a class that I have given to checkboxes against serial numbers.
But it selects all the checkboxes against all serial numbers that are 1 to 4. What I want is that it checks only checkboxes in the current dialog box? How can I achieve this using javascript or jquery? I have many other sample codes but it did not work. Please help.
Html of the main grid:
<table class="display" width="100%" 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"
height="20px"
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"
height="20px"
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>
Dialog Box:
<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>
Can anybody help me?
解决方案 In your function call as you have passed this as well so this will help us to find if the checkbox in that row is checked or not . So , inside AttchmentBox after all html are generated you can check the sno checkbox if checked you can checked all other checkbox inside your AttachmentGrid table .
Then , if any checkbox is uncheck in your AttachmentGrid table you can use the cdCode which is set in each tr to get reference of checkbox where we need to checked or unchecked checkbox.
Demo Code :
//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" width="100%" 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"
height="20px"
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"
height="20px"
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>
这篇关于在选择一个复选框时，勾选另一个 div 的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆