On selecting a checkbox, tick checkboxes of another div

Question

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

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?

select the div using JS and make its "checked" property true. `document.querySelector("#id").checked = true` — ahsan, Jun 11 '21 at 05:35
@AhsanKhan I want the only the checkboxes to be checked that are in the relevant dialog box. — Unknown, Jun 11 '21 at 05:39
so onclick of `onclick="AttchmentBox('_41701','2',this);"` dialog is open ? If yes please show your function code as well . — Swati, Jun 11 '21 at 05:48
The `Dialog Box:` HTMl is all over the place - it is not valid — Professor Abronsius, Jun 11 '21 at 06:00
@ProfessorAbronsius what do you mean? My function is working properly. I just need to know how to auto tick checkboxes in dialog box when the serial number checkbox is checked? — Unknown, Jun 11 '21 at 06:05
The HTML in that `Dialog Box` portion above is totally invalid markup. You have badly formed nesting of elements if you look at it closely — Professor Abronsius, Jun 11 '21 at 06:07
https://stackoverflow.com/a/2191026/16024569 i believe stackoverflow had your answer 12 years, 5 months ago. — Weyers de Lange, Jun 11 '21 at 06:18
@WeyersdeLange This is not what I am looking for. I have already done this. My question is about the dialog box checkboxes — Unknown, Jun 11 '21 at 06:21
did you try for each? . then call on your id of that group to check or uncheck all by including an if and else. — Weyers de Lange, Jun 11 '21 at 06:41

score 1 · Answer 1 · edited Jun 11 '21 at 10:46

1

I edited my answer, you might try this

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

}

edited Jun 11 '21 at 10:46

biberman

5,606
4
11
35

answered Jun 11 '21 at 06:08

Shiz

695
10
27

your code ticks all checkboxes against serial numbers 1 and 2 on selecting parent checkbox against heading Sno. However What I need is If i select checkbox against serail number 1 (Letter) then the checkoxes in the dialong box should also be checked. @Shiz – Unknown Jun 11 '21 at 06:11
@Unknown if you can show how `AttchmentBox('_41702','1',this);` is formed and its function, I might get a better answer. – Shiz Jun 11 '21 at 06:14
By adding these two lines of code in my function, my dialog box is not opening. @Shiz – Unknown Jun 11 '21 at 06:35
@Unknown I added also the x parameter in `function AttchmentBox(id, count, x) {` – Shiz Jun 11 '21 at 06:37
Do i have to call my on click function like this as well? `` AttchmentBox('_41702','1',this,x) `` 2 – Unknown Jun 11 '21 at 06:44
@Unknown actually no, the `this` represents `x` in the function. So `AttchmentBox('_41702','1',this) ` is enough. If this still won't work, we may have to try different codes. – Shiz Jun 11 '21 at 06:46
It does not work. My dialog box is not opening using this. – Unknown Jun 11 '21 at 06:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233640/discussion-between-shiz-and-unknown). – Shiz Jun 11 '21 at 06:50
Hi, nice attempt to solve one part .But, add comments in code it will help others to understand it :) – Swati Jun 11 '21 at 08:45

score 1 · Accepted Answer · edited Jun 11 '21 at 10:56

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

Your code is working for the part where the checkboxes in dialog box gets ticked on selecting serial number however reverse is not working. This is probably due to error I am getting on (document).on("change", "#AttachmentGrid .attachment_selection", function () { Object does not support propoerty on. If you can help me with this, I will mark this as an answer. @Swati — Unknown, Jun 11 '21 at 07:05
The error is gone however when unselecting checkboxes in the dialog box the checkbox against serial number does not get unchecked. @Swati — Unknown, Jun 11 '21 at 07:25
do `console.log(get_code)` see what it prints and also match your id & classes with my code . — Swati, Jun 11 '21 at 07:26
can you tell me what this is actually doing? $("#attchment_div #AttachmentGrid").data("code", id) //set this attr The code that I am getting is _41071 where as my code is just 41071 Is it beacuse of this extra dash? @swati — Unknown, Jun 11 '21 at 07:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233643/discussion-between-swati-and-unknown). — Swati, Jun 11 '21 at 07:30

On selecting a checkbox, tick checkboxes of another div

2 Answers2

Linked