javascript - jQuery 单选按钮检查添加类，否则如果单选按钮未选中则删除类？

Question

我需要2个单选按钮

jQuery(document).ready(function($) {

  if ($('#user_personal').is(':checked')) {
    $('.user_company').addClass('hidden');
    $('.user_personal').removeClass('hidden');
  } else if ($('#user_company').is(':checked')) {
    $('.user_personal').addClass('hidden');
    $('.user_company').removeClass('hidden');
  }

});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-type-item">
  <input name="user" id="user_personal" type="radio">
</div>
<div class="user-type-item">
  <input name="user" id="user_company" type="radio">
</div>

<div class="user_personal">
  <select name="" id="" class="form-control">
    <option value="0"></option>
  </select>
</div>

<div class="user_company">
  <input type="text" class="form-control">
</div>

现在我必须使用 Jquery 检查 radio “#user_personal”，“div.user_company”添加“hidden”类，“div.user_personal”删除“hidden”类。 当我查看 radio “#user_company”时，“div.user_personal”添加“隐藏”类，“div.user_company”删除“隐藏”类。

谢谢大家!

Answer 1

使用 toggleClass 在选择和输入之间切换显示

$('.user-type-item input').click(function(){
     $('.user_personal,.user_company').toggleClass('hidden');

});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-type-item">
  <input name="user" id="user_personal" type="radio" checked>
</div>
<div class="user-type-item">
  <input name="user" id="user_company" type="radio">
</div>

<div class="user_personal hidden">
  <select name="" id="" class="form-control">
                     <option value="0">選択してください。</option>
               </select>
</div>

<div class="user_company">
  <input type="text" class="form-control">
</div>

多个元素:

$('.user-type-item input').click(function() {
  var ind = $(this).parent().index();
  $('.el').addClass('hidden');//hide all inputs
  $('.el').eq(ind).toggleClass('hidden');//show only the input coresponding to the checked radio

});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="user-type-item">
  <input name="user" id="user_personal" type="radio" checked>
</div>
<div class="user-type-item">
  <input name="user" id="user_company" type="radio">
</div>
<div class="user-type-item">
  <input name="user" id="user_company" type="radio">
</div>
</div>
<div class="el user_personal">
  <select name="" id="" class="form-control">
                     <option value="0">選択してください。</option>
               </select>
</div>

<div class="el user_company hidden">
  <input type="text" class="form-control">
</div>
<div class="el user_company hidden">
  <input type="text" class="form-control" value="2">
</div>