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>