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检查无线电 “#user_personal”， “div.user_company” 添加 “隐藏” 类和“分区。 user_personal“删除”隐藏“类。 当我检查收音机“#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>