How to hide all elements except one using variable id in jquery

Question

For a number of years I only want to show the data of the current year by default. That is different every year, so it is variable. I want to show en hide data of every year by checked de checkbox of each year. Checked will visible the data. Unchecked will hide the data. So only the current year is default visible. Here I found my answer in part. There an id of an element is used with a fixed value. What if #myDiv is a variable so in this topic $i?

Then how do I do $('div:not(#2021)').hide(); describe?

This is my code

<html>
  
<head>
    <title>
      Purchase
    </title>
    <script src= "https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style type="text/css">
        .selectt {
            color: #fff;
            padding: 30px;
            display: compact;
            margin-top: 30px;
            width: 60%;
            background: grey;
        }
          
       
    </style>
</head>
  
<body>

<center>

<table>
<?php for ($i = 2018; $i <= 2022; $i++) {
$currentYear = date("Y"); ?>

<tr>
 <td>
    <input type="checkbox" name="Checkbox" value= <?php echo $i; if($i == 2021) { ?> checked <?php } ?> > <?php echo $i; ?>
     <div class= "<?php echo $i; ?>  selectt" id = "<?php echo $i; ?>" >
          This data belongs to this year</div>
 </td>
</tr>
<?php } ?>
</table>

<script type="text/javascript">
$('div:not(#2021)').hide();  // hide everything that isn't #currentyear

    $(document).ready(function() {
        $('input[type="checkbox"]').click(function() {
            var inputValue = $(this).attr("value");
            $("." + inputValue).toggle();
        });
    });
</script>

</center>
</body>
  
</html>

Can you please edit the question to show the actual HTML output, as the PHP code isn't relevant to the issue — Rory McCrossan, Aug 25 '21 at 11:36
Does this answer your question? [How to use JavaScript variables in jQuery selectors?](https://stackoverflow.com/questions/5891840/how-to-use-javascript-variables-in-jquery-selectors) — Heretic Monkey, Aug 25 '21 at 20:21

score 1 · Answer 1 · edited Aug 28 '21 at 22:41

Thank you for your responses. I already found the solution myself.

This is the code.

<script type="text/javascript">
  var cur_year = new Date().getFullYear();

  $("div:not(#" + cur_year + ")").hide(); // hide everything that isn't #currentyear

  $(document).ready(function () {
    $('input[type="checkbox"]').click(function () {
      var inputValue = $(this).attr("value");
      $("." + inputValue).toggle();
    });
  });
</script>

Ps. I have now changed the version of jQuery. Thanks again.

Waqas Altaf · Answer 2 · 2021-08-25T11:48:53.587

0

As I understood that you want to show only the data of specific year, in your case current year 2021. You can just use if statement:

<?php for ($i = 2018; $i <= 2022; $i++) {
$currentYear = 2021;
 ?>

<tr>
 <td>
    <input type="checkbox" name="Checkbox" value= <?php echo $i; if($i == 2021) { ?> checked <?php } ?> > <?php echo $i; ?>
<?php if ($i==$currentYear) { ?>
     <div class= "<?php echo $i; ?>  selectt" id = "<?php echo $i; ?>" >
          This data belongs to this year</div>
<?php } ?>
 </td>
</tr>
<?php 
}
 ?>

It will only display data of currentYear. Furthermore, I would recommend you to use Foreach loop instead of For loop in PHP.

edited Aug 25 '21 at 11:48

answered Aug 25 '21 at 11:43

Waqas Altaf

392
3
16

I want to show en hide data of every year by checked de checkbox of every year. Checked will visible the data. Unchecked will hide the data. Only the current year is default visible. With your solution the toggle function doesn't work anymore. Furthermore, the code in this topic has been simplified. The for loop is actually a While loop resulting from a query. – Bas Aug 25 '21 at 12:03
1

I edited the first question in this topic to make it more complete. You don't have to read all the answers before my question is clear. Thanks to Waqas Altaf – Bas Aug 25 '21 at 20:28

score 0 · Answer 3 · answered Aug 25 '21 at 21:08

Solution without `div` id:

As your php-code would assign dynamically a value to each checkbox, try the following without id of div elements.

Use your checkbox's parent td element and then the child-div of that very td cell to hide/show that corresponding div:

$(this).parent().children("div")

Try and Run code snippet (I simulated your php-echo with sample-data 2018 till 2021)

$(function() { // instead of $(document).ready(function() {
  // moved this inside here, when jQuery is loaded
  $('td>div').hide();  // hide everything

  // now, show only #currentyear
  $('input[type="checkbox"]').each(function() {
    if($(this).val() == '2021') {
      $(this).prop('checked', true);
      $(this).parent().children("div").show()
    }
  });
    
  $('input[type="checkbox"]').click(function() {
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  });
  
});

.selectt {
  color: #fff;
  padding: 30px;
  display: compact;
  margin-top: 30px;
  width: 60%;
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- jquery is already loaded, don't load two different versions of jQuery -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> -->


<center>
  <table>
  <!-- replacing php result with sample data
       that mimick your php echo

  <?php for ($i = 2018; $i <= 2022; $i++) {
  $currentYear = date("Y"); ?>
  -->
  <tr>
    <td>
      <input type="checkbox" name="Checkbox" value="2018">
      <div class= "2018  selectt" >
        This data belongs to year 2018
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="Checkbox" value="2019">
      <div class= "2019  selectt" >
        This data belongs to year 2019
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="Checkbox" value="2020">
      <div class= "2020  selectt" >
        This data belongs to year 2020
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="Checkbox" value="2021">
      <div class= "2021  selectt" >
        This data belongs to year 2021
      </div>
    </td>
  </tr>
  <!--
  <?php } ?>
  -->
  </table>
</center>

Note:
In your code, you loaded jQuery twice (2 different versions) - I corrected that.

How to hide all elements except one using variable id in jquery

3 Answers3

Solution without div id:

Solution without `div` id: