如何根据单选框选中状态显示或隐藏div

你的现有代码已经完全实现了需求：点击“2 Cars”单选框时显示“j'ai sélectionne 2”，点击任意一个“3 Cars”单选框时显示“j'ai sélectionne 3”。不过可以做一些规范层面的优化，让代码更健壮、易维护：

• 规范ID命名：HTML标准建议ID以字母开头（虽然数字开头在HTML5中允许，但不符合通用编码规范），调整描述框的ID和单选框的data-target属性后，代码可读性会大幅提升。
• 简化逻辑表述：在保留原有交互逻辑的前提下，让代码结构更清晰直观。

修改后的完整代码 #

JavaScript部分

$(document).ready(function() {
  // 初始隐藏所有描述框
  $(".desc").hide();
  
  // 绑定单选框点击事件
  $("input[name='choix_livraison']").click(function() {
    const targetId = $(this).data("target");
    // 先隐藏所有描述框，再显示目标框
    $(".desc").hide();
    $("#" + targetId).show();
  });
});

HTML部分

<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="desc-2cars" value="1"><br>

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

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

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

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

说明 #

修改后的代码完全保留了你需要的交互逻辑，同时通过语义化的ID命名让代码更易理解，后续维护时能快速对应单选框和目标描述框的关系。

内容的提问来源于stack exchange，提问作者henri