CODEWITHSUNDEEP
javascripthtml
Muiter
Muiter

Reputation: 1520

Click function on checkbox for toggeling table elements

I have been trying to use this JS for hiding some html table th and td elements.

$(document).ready(function(){
    $('th.proces').hide();
    $('td.proces').hide();
    $('#hide_proces').click(function() {
        if($(this).attr('checked'))
        {
            $('th.proces').show();
            $('td.proces').show();
        }
        else
        {
            $('th.proces').hide();
            $('td.proces').hide();
        }
    });
});

When the page is loaded the items are hidden, so that is working.

Now I have this checkbox, and when checked the th and td elements should be made visible again.

<input id="hide_proces" type="checkbox"/>
<th class="proces">Proces</th>
<td class="proces">some content</td>

When the checkbox is checked the elements are still not visible, also no errors in the console. Any suggestions?

Upvotes: 1

Views: 54

Answers (3)

Ian
Ian

Reputation: 1179

$('#hide_proces').change(function() {
  let $e = $(".proces");
  $(this).is(':checked') ?
    $e.removeClass("hidden") : $e.addClass("hidden");
});
.hidden {
  display: none !important;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <meta charset="UTF-8">
  <title>Title of the document</title>
</head>

<body>
  <input id="hide_proces" type="checkbox" />
  <table>
    <tr>
      <th class="proces hidden">Proces</th>
    </tr>
    <tr>
      <td class="proces hidden">some content</td>
    </tr>
</body>

</html>

Upvotes: 0

Jatinder Pal Singh
Jatinder Pal Singh

Reputation: 236

try this

$(document).ready(function(){
    $('th.proces').hide();
    $('td.proces').hide();
    const $hideProcess = $('#hide_proces');
    $hideProcess.click(function() {
        if($hideProcess.is(':checked'))
        {
            $('th.proces').show();
            $('td.proces').show();
        }
        else
        {
            $('th.proces').hide();
            $('td.proces').hide();
        }
    });
});

Upvotes: 0

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

check the value of the checkbox using this.checked then use show or hide to show column,

see below snippet 

$(document).ready(function(){
    $('th.proces').hide();
    $('td.proces').hide();
    
    
    $("#hide_proces").on("click",function(e){
      this.checked ? ($('th.proces').show(),$('td.proces').show())
                   : ($('th.proces').hide(),$('td.proces').hide());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

show process :<input id="hide_proces" type="checkbox" />


<br /><br /><br />

<table>
  <tr>
    <th class="proces">proces</th>
    <th>Item</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td class="proces">some text  1!</td>
    <td>Apples</td>
    <td>$15</td>
  </tr>
  <tr>
    <td class="proces">some text 2 !</td> 
    <td>Orange</td>
    <td>$9</td>
  </tr>
  <tr>
    <td class="proces">some text 3 !</td> 
    <td>Bananas</td>
    <td>$7</td>
  </tr>
</table>

Upvotes: 1

Related Questions