jQuery Optionsfeldprüfung Klasse hinzufügen, andernfalls Klasse entfernen, wenn Optionsfeld nicht aktiviert ist?

Question

Ich brauche 2 Radiobutton

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>

Jetzt muss ich JQuery verwenden Sie das Radio "#user_personal" zu überprüfen "div.user_company" fügen Sie die "versteckte" Klasse und „div. user_personal "Entfernen Sie die" versteckte "Klasse. Und wenn ich im Radio "#user_company" einchecke, fügt "div.user_personal" die "versteckte" Klasse hinzu und "div.user_company" entfernt die "versteckte" Klasse.

Danke allen!

Answer 1

Verwenden toggleClass Displays, um zwischen der Auswahl und dem Eingang

$('.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>

mehrere Elemente:

$('.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>