如何根据输入的状态隐藏或显示 div

Question

如何根据所选收音机的类型显示或隐藏div

目前，当我点击 2 辆车时，我有一个代码，它显示 j'ai sélectionne 2">

另一方面，如果我单击其他 3 个单选按钮，我会为每个按钮显示"j'ai sélectionne 3">

我希望如果我选择第一个单选按钮，它会显示 j'ai sélectionne 2

如果我选择第二个单选按钮，它会显示 j'ai sélectionne 3

如果我选择第三个按钮，它会显示 j'ai sélectionne 3

如果我选择第四个按钮，它会显示 j'ai sélectionne 3

感谢您的帮助

$(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>

Answer 1

我重用了您提供的代码，将数字从 1 固定为 4。

编辑：让它成为香草 JS

function hide_all() {
document.querySelectorAll("div.desc").forEach(elem => elem.style.display = 'none');
}
hide_all();
document.querySelectorAll("input[name$='choix_livraison']").forEach(elem => {
elem.addEventListener('click', function() {
var test = elem.getAttribute("data-target");
hide_all()
document.querySelector("#a" + test).style.display = 'block';
})
});

<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="a1" class="desc">
j'ai sélectionne 1
</div>
<div id="a2" class="desc">
j'ai sélectionne 2
</div>
<div id="a3" class="desc">
j'ai sélectionne 3
</div>
<div id="a4" class="desc">
j'ai sélectionne 4
</div>