Javascript 显示基于复选框的隐藏内容，如果选中一个复选框，则禁用另一个复选框

我有三个复选框，第一个复选框将默认选中，内容将显示，对应于第一个复选框

若我选中了第二个复选框，第一个复选框将被取消选中，内容将发生变化，对应于第二个复选框

若我选中了第三个复选框，其余的复选框将被取消选中，内容将发生变化，对应于第三个复选框

下面是我的代码，但有一些是如何工作的

    <fieldset class="question">
           <label for="coupon_question">Show India content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />

       </fieldset>

       <fieldset class="question">
           <label for="coupon_question">Show Japan content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />

       </fieldset>

       <fieldset class="question">
           <label for="coupon_question">Show China content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />

       </fieldset>

       <fieldset class="answer">
           <label for="coupon_field">India Content:</label>
           <input type="text" name="coupon_field" id="coupon_field"/>
       </fieldset>

       <fieldset class="answer">
           <label for="coupon_field">Japan Content:</label>
           <input type="text" name="coupon_field" id="coupon_field"/>
       </fieldset>


       <fieldset class="answer">
           <label for="coupon_field">China Content:</label>
           <input type="text" name="coupon_field" id="coupon_field"/>
       </fieldset>

Below is my jquery

<script>
    $(".answer").hide();
    $(".coupon_question").click(function() {
        if($(this).is(":checked")) {
            $(".answer").show();
        } else {
            $(".answer").hide();
        }
    });
</script>

显示印度内容
显示日本内容
显示中国内容
印度内容：
日本内容：
中国内容：
下面是我的jquery
$（“.answer”）.hide（）；
$（“.优惠券\问题”）。单击（函数（）{
如果（$（this）.is（“：checked”））{
$（“.answer”）.show（）；
}否则{
$（“.answer”）.hide（）；
}
});

1解决这个问题的方法是获取复选框的索引，并使用该索引确定应该显示什么答案

$(".answer").hide();
$(".coupon_question").click(function() {
  var i = $(this).index(".coupon_question");
  if ($(this).is(":checked")) {
    $(".answer").eq(i).show();
  } else {
    $(".answer").eq(i).hide();
  }
});

带复选框的演示

$（.answer”）.hide（）；
$（“.优惠券\问题”）。单击（函数（）{
var i=$（此）.index（“.coupon_question”）；
如果（$（this）.is（“：checked”））{
$（“.answer”）.eq（i）.show（）；
}否则{
$（“.answer”）.eq（i）.hide（）；
}
});

显示印度内容
显示日本内容
显示中国内容
印度内容：
日本内容：
中国内容：
请注意，它应该始终是唯一的
优惠券\u字段
能否向我提供一些示例代码，但当第一个复选框内容显示时，应取消选中其余复选框，并隐藏另一个复选框内容，同时选中一个复选框并显示一个内容，请help@kunal如果您当时只想激活一个复选框，为什么不使用单选按钮？是的，我们可以使用单选按钮，但一次应显示一个单选按钮内容，请提供一些示例代码，这将对me@kunal你看过我的第二个演示了吗？