Question

我在选择单选按钮时有两个单选按钮，它应显示div和隐藏div。以下是我的剧本，我不明白为什么它不起作用。

的JavaScript

＆＃13;

$(document).ready(function() {
  $(".text").show();
  $(".text1").hide();
  $("#r1").click(function() {
    $(".text").show();
    $(".text1").hide();
  });

  $("#r2").click(function() {
    $(".text1").show();
    $(".text").hide();
  });

});

＆＃13;

HTML

<p>Show textboxes
  <input type="radio" name="radio1" id="r1" checked value="Show" onClick="getResults()">Do nothing
  <input type="radio" name="radio1" id="r2" onClick="getResults()" value="Show">
</p> Wonderful textboxes:
<div  class="text">
  <p>Textbox #1
    <input type="text" name="text" id="text" maxlength="30">
  </p>
  <p>Textbox #2
    <input type="text" name="text" id="text" maxlength="30">
  </p>
</div>

<div class="text1">
  <p>Textbox #3
    <input type="text" name="text1" id="text1" maxlength="30">
  </p>
  <p>Textbox #4
    <input type="text" name="text2" id="text1" maxlength="30">
  </p>
</div>

here is jsfiddle link

Answer 1

使用change()事件处理程序来处理change事件，并使用toggle()方法使用布尔参数切换元素状态。

$(document).ready(function() {
  // attach change event handler
  $("#r1,#r2").change(function() {
    // toggle based on the id
    $(".text").toggle(this.id == 'r1');
    $(".text1").toggle(this.id == 'r2');
    // trigger change event to hide initially
  }).first().change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Show textboxes
  <input type="radio" name="radio1" id="r1" checked value="Show">Do nothing
  <input type="radio" name="radio1" id="r2" value="Show">
</p> Wonderful textboxes:
<div class="text">
  <p>Textbox #1
    <input type="text" name="text" maxlength="30">
  </p>
  <p>Textbox #2
    <input type="text" name="text" maxlength="30">
  </p>
</div>

<div class="text1">
  <p>Textbox #3
    <input type="text" name="text1" maxlength="30">
  </p>
  <p>Textbox #4
    <input type="text" name="text2" maxlength="30">
  </p>
</div>

FYI：该属性在页面上应该是唯一的，因为一组元素使用class属性，否则只有在使用id选择器时才会选择具有id的第一个元素。

Answer 2

你的守则看起来很好。确保你正确添加JQuery

喜欢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(".text").show();
  $(".text1").hide();
  $("#r1").click(function() {
    $(".text").show();
    $(".text1").hide();
  });

  $("#r2").click(function() {
    $(".text1").show();
    $(".text").hide();
  });

});
</script>

Answer 3

添加jquery引用后，您的代码工作正常。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Answer 4

使用隐藏和显示的切换方法转到以下链接 https://www.w3schools.com/jquery/eff_toggle.asp

如何在单选按钮选择的基础上显示和隐藏div

4 个答案: