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

Posted 2023-05-08

【中文标题】在选择多个复选框时将属性附加到变量

【英文标题】：Appending attributes to a variable on selection of multiple checkboxes

【发布时间】：2021-08-29 02:23:03

【问题描述】：

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

 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 的所有复选框都将被选中，因此所有对话框也将被选中。

下面是我的代码。如果你运行 sn-p，你就会明白我要解释的内容。

//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"  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" 
           
          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" 
           
          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 有效。我如何满足其他两种情况？请帮忙。

【问题讨论】：

addAttributes 函数如何被调用？

@Swati 您好，点击对话框内的复选框会调用它。但我认为这不是正确的方法。由于用户可以直接选择序列号复选框。我不知道如何做到这一点。

你能用那个onclick和js代码更新html吗？

@Swati 我已经更新了我的 html。我实际上不知道这个 sn-p 是如何工作的。我尽力了

@Swati 我想将文档代码附加到变量的原因是因为在用户选择了他想要的复选框后，他将按下下载文件按钮，该按钮将只下载选定的文件。所以我想在一个字符串中收集所有这些代码。

【参考方案1】：

不要将它们添加到某个变量中，而是将它们保存在 array 中。因此，在下面的代码中，每当检查您的 sno 时，我都会添加函数调用 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"  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"  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>

【讨论】：

所以我只能在我的 AttachmentGrid 函数中调用这个函数 addAttributes 吗？ @斯瓦蒂

是的，看看这是否适用于您，或者您是否需要其他东西。

让我试试@swati

您好，但这仅在您单击附件图像时有效。如果用户只选择序列号 1 复选框，对话框中的复选框将自动勾选，如果用户不点击附件图像，它会以这种方式工作吗？此外，如果用户从对话框中取消选中任何复选框，该文档是否将从数组中删除？我在我的问题@Swati

中提到了所有场景

如果用户从对话框中取消选中任何复选框，该文档是否将从数组中删除.. - 是的（试试上面的代码 sn-p）。另外，关于click on the attachment image. what if the user just se..，这也可以完成..但是，问题是我们将从哪里获得 docCodes，因为它们是动态生成的，并且只有在点击 attachmnts 时才会生成？