Question

我有3个复选框，默认情况下将选中第一个复选框，并显示与第一个复选框相对应的内容。

如果我选中了第二个复选框，则第一个复选框将取消选中，并且内容将更改，与第二个复选框相对应。

如果我选中了第三个复选框，则其余复选框将被取消选中，并且内容将更改，与第三个复选框相对应。

下面是我的代码，但是有些代码不起作用

    <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

解决问题的一种方法是获取复选框的索引，并以此来确定应显示的答案。

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

带有收音机的演示

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

根据复选框显示隐藏内容，如果选中一个复选框，则禁用另一复选框

1 个答案: