如何隐藏和显示单击单选按钮上的段落

Question

我试图隐藏并显示关于单击单选按钮的段落。而且我希望当用户登陆页面时，第一个单选按钮处于活动状态。

这是我的HTML：

<div class="BusinessForm">
  <p class="showBusinessForm" style="display:none">Business</p>
</div>
<div class="TechnicalForm">
  <p class="showTechnicalForm" style="display:none">Technical</p>
</div>
<div class="LoginForm">
  <p class="showLoginForm" style="display:none">login</p>
</div>

这是我的JS代码：

$(document).ready(function() {
    $(".showBusinessForm").show();
});
$(".showBusinessForm").click(function(){
    $(".showTechnicalForm").hide();
    $(".showLoginForm").hide();
    $(".showBusinessForm").show();
});
$(".showTechnicalForm").click(function(){
    $(".showTechnicalForm").show();
    $(".showLoginForm").hide();
    $(".showBusinessForm").hide();
});
$(".showLoginForm").click(function(){
    $(".showTechnicalForm").hide();
    $(".showLoginForm").show();
    $(".showBusinessForm").hide();
});

Answer 1

我建议你采用动态方法，而不是针对每个div。

您可以使用表单的值和类来选择要使用单选按钮显示的目标表单。

$(".radiobtn").click(function(){
  $(".form").hide();
  $("."+$(this).val()).show();
})

.form{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Business <input type="radio" class="radiobtn" value="BusinessForm" name="showForm"/>
Technical <input type="radio" class="radiobtn" value="TechnicalForm" name="showForm"/>
Login <input type="radio" class="radiobtn" value="LoginForm" name="showForm"/>

<div class="form BusinessForm">
  <p>Business</p>
</div>
<div class="form TechnicalForm">
  <p>Technical</p>
</div>
<div class="form LoginForm">
  <p>login</p>
</div>

Answer 2

我不想太多修改你的脚本。这是基于您的脚本的工作示例

$(document).ready(function() {
  $("input:radio").change(function() {
    if($("#business").prop('checked') == true) {
      $(".BusinessForm").show();
      $(".TechnicalForm").hide();
      $(".LoginForm").hide();
    }else if($("#technical").prop('checked') == true) {
      $(".BusinessForm").hide();
      $(".TechnicalForm").show();
      $(".LoginForm").hide();
    }else if($("#login").prop('checked') == true) {
      $(".BusinessForm").hide();
      $(".TechnicalForm").hide();
      $(".LoginForm").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-buttons">
  <div class="group">
    <label for="business">Business radio</label>
    <input type="radio" name="radio" id="business" checked />
  </div>
  <div class="group">
    <label for="technical">Business radio</label>
    <input type="radio" name="radio" id="technical" />
  </div>
  <div class="group">
    <label for="login">Business radio</label>
    <input type="radio" name="radio" id="login" />
  </div>
</div>
<div class="BusinessForm">
  <p class="showBusinessForm">Business</p>
</div>
<div class="TechnicalForm" style="display: none;">
  <p class="showTechnicalForm">Technical</p>
</div>
<div class="LoginForm" style="display: none;">
  <p class="showLoginForm">login</p>
</div>