在选择一个复选框时，勾选另一个 div 的复选框

Question

我有一个动态网格。网格的结构如下：

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" 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&nbsp;&nbsp;
      <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&nbsp;&nbsp;
      <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>

对话框：

<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>

谁能帮帮我？

Answer 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" 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&nbsp;&nbsp;
      <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&nbsp;&nbsp;
      <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>

Answer 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);
  }

}