Show hide content based on check boxes, if one check box checked disable another check boxes

Question

I have three check boxes, first one will be checked by default and content will display, corresponding to first check box.

if I checked second checked box, first check box will unchecked and content will change, corresponding to second check box.

If I checked third checkbox, rest of the check boxes will unchecked and content will change, corresponding to third check box.

Below is the my code, but some how its not working

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

Answer 1

1 way you can solve it is by getting the index of the checkbox, and use that to determent what answer shall be shown.

$(".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();
  }
});

Demo with checkbox

 $(".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(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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" /> </fieldset> <fieldset class="answer"> <label for="coupon_field">Japan Content:</label> <input type="text" name="coupon_field" /> </fieldset> <fieldset class="answer"> <label for="coupon_field">China Content:</label> <input type="text" name="coupon_field" /> </fieldset>

Demo with radio

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <fieldset class="question"> <label for="coupon_question">Show India content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" /> </fieldset> <fieldset class="question"> <label for="coupon_question">Show Japan content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" /> </fieldset> <fieldset class="question"> <label for="coupon_question">Show China content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" /> </fieldset> <fieldset class="answer"> <label for="coupon_field">India Content:</label> <input type="text" name="coupon_field" /> </fieldset> <fieldset class="answer"> <label for="coupon_field">Japan Content:</label> <input type="text" name="coupon_field" /> </fieldset> <fieldset class="answer"> <label for="coupon_field">China Content:</label> <input type="text" name="coupon_field" /> </fieldset>