How to hide or show a div depending on the state of an input

July 30, 2022

How to show or hide a div depending on the type of radio selected

For the moment I have a code when I click on 2 cars it displays j’ai sélectionne 2"

On the other hand if I click on the 3 other radio buttons I have "j’ai sélectionne 3" which are displayed for each button

I wish that if I select the first radio button it displays j’ai sélectionne 2

if I select the second radio button it displays j’ai sélectionne 3

if I select the third button it displays j’ai sélectionne 3

if I select the fourth button it displays j’ai sélectionne 3

Thanks for the help

$(document).ready(function() {
  $("div.desc").hide();
  $("input[name$='choix_livraison']").click(function() {
    var test = $(this).data("target");;
    $("div.desc").hide();
    $("#" + test).show();
  });
});

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

2 Cars <input type="radio" name="choix_livraison" data-target="1" value="1"><br>

3 Cars <input type="radio" name="choix_livraison" data-target="2" value="2"> <br> 

3 Cars <input type="radio" name="choix_livraison" data-target="2" value="3"> <br>

3 Cars <input type="radio" name="choix_livraison" data-target="2" value="4"> <br>
<br>

<div id="1" class="desc">
  j'ai sélectionne 2
</div>
<div id="2" class="desc">
  j'ai sélectionne 3
</div>

>Solution :

I re-used the code you provided, fixing the numbers from 1 to 4.

$(document).ready(function() {
  $("div.desc").hide();
  $("input[name$='choix_livraison']").click(function() {
    var test = $(this).data("target");;
    $("div.desc").hide();
    $("#" + test).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>1 Cars <input type="radio" name="choix_livraison" data-target="1" value="1"></label><br>
<label>2 Cars <input type="radio" name="choix_livraison" data-target="2" value="2"></label><br>
<label>3 Cars <input type="radio" name="choix_livraison" data-target="3" value="3"></label><br>
<label>4 Cars <input type="radio" name="choix_livraison" data-target="4" value="4"></label><br>
<br>

<div id="1" class="desc">
  j'ai sélectionne 1
</div>
<div id="2" class="desc">
  j'ai sélectionne 2
</div>
<div id="3" class="desc">
  j'ai sélectionne 3
</div>
<div id="4" class="desc">
  j'ai sélectionne 4
</div>