javascript - 在选择多个复选框时将属性附加到变量

Question

我有一个看起来像这样的动态网格

 Serial No(checkbox1)                  Document Name       Attachment
  1(checkbox2)                           abc               (img)
  2(checkbox2)                           xyz               (img)
  3(checkbox2)                           uio               (img)
  4(checkbox2)                           pop               (img)

让我解释一下这是如何工作的。当用户单击附件 img 时，它会打开一个对话框，显示其中附加的所有文件。每个文件还将有一个复选框。让我们称它们为 checkbox3。如果用户针对序列号 1 选择复选框 2，则对话框中的复选框(仅限序列号 1 的对话框)也将被选中。同样，如果用户选择了 2 号线的 checkbox2，那么相关对话框的复选框也将被选中。
现在，如果用户选中与 serailNo 标题相对的 checkbox1，那么从序列号 1 到 4 的所有复选框都将被选中，因此所有对话框也将被选中。
下面是我的代码。如果您运行该代码段，您就会明白我要解释的内容。

//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {

  var total = $(".attachment_selection").length
  var get_code = $("#AttachmentGrid").data("code").split("_")[1] 
  //if all checked..
  if ($(".attachment_selection:checked").length == total) {
    $("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true) 
  } else {
    $("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false) 
  }

})

   

#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' onclick="addAttributes('78427','41701',this);">
        <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' 
         onclick="addAttributes('78424','41701',this);"
        >
        <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>

var docCodes = '';
    function addAttributes(docID, CdCode, el) {
        var str = docID + '♦';
        if ($(el).is(':checked')) {
            docCodes += str;
            alert(docCodes);
            console.log(docCodes);
        }
        else {
            docCodes = docCodes.replace(str, '');
            console.log(docCodes);
        }
    }

我想要做的是在选择复选框时，我希望对话框中附加的文件的文档代码附加到变量。
我所做的是为对话框内的复选框创建了一个 onclick 函数

   var docCodes = '';
    function addAttributes(docID, CdCode, el) {
        var str = docID + '♦';
        if ($(el).is(':checked')) {
            docCodes += str;
            alert(docCodes);
            console.log(docCodes);
        }
        else {
            docCodes = docCodes.replace(str, '');
            console.log(docCodes);
        }
    }

这工作正常，但并非在所有情况下。因为可以有多种场景
场景 1:用户打开这个网格，现在它没有勾选任何复选框，他打开了 Sno 1 的对话框，并检查了附加文件的复选框。(假设有 3 个附加文件)。然后我的函数会将文档代码附加到我的字符串 docCodes 中。
场景 2:用户打开一个网格，并选中 Sno1 复选框，这意味着对话框中的复选框也会自动勾选。在这种情况下，它应该检查对话框中的复选框是否被勾选，然后附加相关的文档代码，如果用户稍后取消勾选，则删除该属性。
场景3:用户直接针对序列号标题检查checkbox1，这将检查所有子复选框。
现在只有场景 1 有效。我如何实现其他两个场景？请帮忙。

Answer 1

而不是将它们添加到某个变量中，而是将它们保存在 array 中。所以，在下面的代码中，我添加了函数调用 addAttributes每当你的鼻涕被检查。然后，因为我们没有 docCodes在那里，您可以遍历对话框中选中的复选框，然后将它们推送到数组中。
演示代码 :

//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {

  var total = $(".attachment_selection").length
  var get_code = $("#AttachmentGrid").data("code").split("_")[1]
  //if all checked..
  if ($(".attachment_selection:checked").length == total) {
    $("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true)
  } else {
    $("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false)
  }

})

function AttchmentBox(id, count, el) {

  if (parseInt(count) > 0) {

    $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)

    if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
      $("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true)
      //sno is checked call your function: 
      addAttributes()

    }
    $("#attchment_div #AttachmentGrid").data("code", id) 
    $("#attchment_div").show() 
  }

}
var docCodes = [];

function addAttributes(docID, CdCode, el) {
  //el == undefined call from AttchmentBox
  if (el == undefined) {
    //loop through checked checkbox...
    $(".attachment_selection:checked").each(function() {
      var str = $(this).attr("id").split("_")[1];//id=chkAttachment_78424 .etc
      //if not inside array
      if (docCodes.indexOf(str) == -1) {
        docCodes.push(str) //push that in array
      }
    })

  } else {
    var str = docID;
    //if checked..and not inside array
    if ($(el).is(':checked') && docCodes.indexOf(str) == -1) {
      docCodes.push(str)
    } else {
      docCodes.splice(docCodes.indexOf(str), 1) //remove it..
    }
  }
  console.log(docCodes)
}

#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>
</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' onclick="addAttributes('78427','41701',this);">
        <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' onclick="addAttributes('78424','41701',this);">
        <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>