show/hide icons in div in table row using jquery

Question

I have a table, its is data displayed using foreach. one column have 3 icons, by default they are hidden. And also have checkbox. icons and checkbox are in every row. Now when select any checkbox, icons of all rows are appearing. Instead I want only one row icons should be displayed on selecting checkbox. Can somebody help please. thanks in advance. here is the code. in view

<?php $sn= $this->uri->segment(4); foreach($companies as $company){ $sn++;?>
   <tr class="parent" style="font-size:11px;color:#3D4061;border-bottom:1px solid #3d406136">
      <td><input type="checkbox" class="text-center check_data mt-2" onchange="changevalue()"></td>
      <td class="text-center" style=""><h6><?php echo $sn; ?></h6></td>
      <td class="text-center" style=""><h6><?php echo $company->company_name; ?></h6></td>
      <td class="text-center" style=""><h6><?php echo $company->contact_no; ?></h6></td>
      <?php if($company->activation_status == 1){?>
        <td class="text-center" style=""><h6 class="text-success font-weight-bold" style="font-size:13px">Active</h6></td>
      <?php } ?>
      <?php if($company->activation_status == 0){?>
        <td class="text-center" style=""><h6 class="text-danger font-weight-bold" style="font-size:13px">Inactive</h6></td>
      <?php } ?>
      <td class="text-center" style="">
        <div class="status">
          <a href="<?php echo base_url().'superadmin/company_ctrl/edit_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="EDIT" class="f13"><i class="fa fa-edit"></i></a>
          <?php if($company->activation_status == 0){?>
            <a href="<?php echo base_url().'superadmin/company_ctrl/activate_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="ACTIVE" class="f13"><i class="fa fa-dot-circle-o"></i></a>
          <?php }else{ ?>
            <a href="<?php echo base_url().'superadmin/company_ctrl/deactivate_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="INACTIVE" class="f13"><i class="fa fa-exclamation-triangle"></i></a>
          <?php } ?>
            <a href="<?php echo base_url().'superadmin/company_ctrl/delete_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="DELETE" class="f13 delete_row"><i class="fa fa-trash-alt"></i></a>
        </div>
       </td>
       <td ><i class="fa fa-chevron-down down" ></i></td>
   </tr>

and script is

  <script>
  $('.status').hide();
    function changevalue(){
      if($(".check_data").is(":checked"))
      $('.status').show();
      else
      $(".status").hide();
      $('.cchild').hide();
    }
</script>

Answer 1

You can give dynamic Ids to every checkbox and status div. Use your record's id may be companyId to create Ids like

<input type="checkbox" id="checkbox_('<?php echo $company->id; ?>')>

I don't know the syntax for php.

and then you can pass the current companyId in onchange="changevalue(companyId)"

and then your code will be like this

function changevalue(companyId){
      if($("#checkbox" + companyId).is(":checked"))
      $('#status' + companyId).show();
      else
      $("#status" + companyId).hide();
    }

Answer 2

you can also use .parent() and .find() methods to get specific row like that:

<input type="checkbox" function="changevalue(this)">

and your javacript must be like that:

function changevalue(elem){
  if($(elem).is(":checked"))
  $(elem).parent().parent().find('.status').show();
  else
  $(elem).parent().parent().find('.status').hide();
}

This code can be simplified but it's a good starting example to understand parent-child usage of html elements. At this example first .parent() goes to <td> of checkbox element and second .parent() goes to <tr> element then it searches for .status class in it then hides it.

and you can simplfy it like that:

function changevalue(elem){
  if($(elem).is(":checked"))
  $(elem).parents("tr").find('.status').show();
  else
  $(elem).parents("tr").find('.status').hide();
}

Answer 3

function changevalue() {
    var $this = $(this),
        $status = $this.parents("tr").find(".status");

    if ($this.is(":checked")) {
        $status.show();
    } else {
        $status.hide();
    }
}