Wenn Radiobutton mit Wert der Frau überprüft wird, zeigen Klasse weiblich und verstecken Klasse männlich

Question

Ich bin mir nicht sicher, was ich falsch mache, kann jemand bitte helfen? Ich habe 2 Radioknöpfe. Ich möchte das Dropdown-Menü mit der Klasse "männlich" ausblenden, wenn die weibliche Option und zeigen Sie das Dropdown-Menü mit der Klasse der Frau und das Gegenteil tun, wenn der männliche Wert ausgewählt ist. Hier ist, was ich versucht:

$(document).ready(function() { 
 
    $('input[type=radio]').click(function() { 
 
    \t if($('input[value=Female]').is('checked')) { 
 
    \t \t $('.female').show(); 
 
    \t \t $('.male').hide(); 
 
    \t } else if($('input[value=Male]').is('checked')) { 
 
    \t \t $('.male').show(); 
 
    \t \t $('.female').hide(); 
 
    \t } else { 
 
    \t \t $('.male').hide(); 
 
    \t \t $('.female').hide(); 
 
    \t } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<ul> 
 

 
<li class="input-container"> 
 
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio"> 
 
<label for="3151_55396_8_60103_1">Female</label> 
 
</li> 
 
<li class="input-container"> 
 
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio"> 
 
<label for="3151_55396_8_60103_2">Male</label> 
 
</li> 
 
</ul> 
 

 
<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Female - Small">Female - Small</option> 
 
<option value="Female - Medium">Female - Medium</option> 
 
<option value="Female - Large">Female - Large</option> 
 
</select> 
 
<br /> 
 
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Male - Small">Male - Small</option> 
 
<option value="Male - Medium">Male - Medium</option> 
 
<option value="Male - Large">Male - Large</option> 
 
</select>

jede Hilfe wäre sehr dankbar!

Answer 1

checked ist ein psedo Selektor und sollte :checked sein.

$(document).ready(function() { 
 
    $('input[type=radio]').click(function() { 
 
    \t if($('input[value=Female]').is(':checked')) { 
 
    \t \t $('.female').show(); 
 
    \t \t $('.male').hide(); 
 
    \t } else if($('input[value=Male]').is(':checked')) { 
 
    \t \t $('.male').show(); 
 
    \t \t $('.female').hide(); 
 
    \t } else { 
 
    \t \t $('.male').hide(); 
 
    \t \t $('.female').hide(); 
 
    \t } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<ul> 
 

 
<li class="input-container"> 
 
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio"> 
 
<label for="3151_55396_8_60103_1">Female</label> 
 
</li> 
 
<li class="input-container"> 
 
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio"> 
 
<label for="3151_55396_8_60103_2">Male</label> 
 
</li> 
 
</ul> 
 

 
<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Female - Small">Female - Small</option> 
 
<option value="Female - Medium">Female - Medium</option> 
 
<option value="Female - Large">Female - Large</option> 
 
</select> 
 
<br /> 
 
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Male - Small">Male - Small</option> 
 
<option value="Male - Medium">Male - Medium</option> 
 
<option value="Male - Large">Male - Large</option> 
 
</select>

Answer 2

Ihr Problem ist, weil Sie checked verwenden sind, nicht :checked im is() Methodenaufruf. Beachten Sie auch, dass Sie das Best Practices change bei Radio und Checkboxen verwenden sollten, damit Benutzer, die über die Tastatur navigieren, die Elemente weiterhin auswählen können.

Mit diesem gesagt, können Sie die Logik verkürzen, indem Sie die toggle()-Methode auf die select Elemente verwenden und den Wert des aktivierten Optionsfelds einzeln überprüfen. Versuchen Sie folgendes:

$(document).ready(function() { 
 
    $('.testtesttest').change(function() { 
 
    $('.female').toggle(this.value == 'Female'); 
 
    $('.male').toggle(this.value == 'Male'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<ul> 
 
    <li class="input-container"> 
 
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio"> 
 
    <label for="3151_55396_8_60103_1">Female</label> 
 
    </li> 
 
    <li class="input-container"> 
 
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio"> 
 
    <label for="3151_55396_8_60103_2">Male</label> 
 
    </li> 
 
</ul> 
 

 
<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 
    <option value="NOREPLY">Please select response</option> 
 
    <option value="Female - Small">Female - Small</option> 
 
    <option value="Female - Medium">Female - Medium</option> 
 
    <option value="Female - Large">Female - Large</option> 
 
</select><br /> 
 

 
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 
    <option value="NOREPLY">Please select response</option> 
 
    <option value="Male - Small">Male - Small</option> 
 
    <option value="Male - Medium">Male - Medium</option> 
 
    <option value="Male - Large">Male - Large</option> 
 
</select>

Answer 3

checked ist ein Pseudo-Selektor und es sollte wie :checked verwendet werden. Ich schlage vor, Sie verwenden 10 für den Radio-Button. Sie können das verwenden oder Sie können den aktuellen Wert mit $(this).val() abrufen und die darauf basierenden Elemente ausblenden. Bitte beachten Sie die Arbeits Schnipsel unten:

$(document).ready(function() { 
 
    $('input[type=radio]').on('change', function() { 
 
    var value = $(this).val(); 
 
    if (value == 'Female') { 
 
     $('.female').show(); 
 
     $('.male').hide(); 
 
    } else if (value == 'Male') { 
 
     $('.male').show(); 
 
     $('.female').hide(); 
 
    } else { 
 
     $('.male').hide(); 
 
     $('.female').hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 

 
    <li class="input-container"> 
 
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio"> 
 
    <label for="3151_55396_8_60103_1">Female</label> 
 
    </li> 
 
    <li class="input-container"> 
 
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio"> 
 
    <label for="3151_55396_8_60103_2">Male</label> 
 
    </li> 
 
</ul> 
 

 
<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Female - Small">Female - Small</option> 
 
<option value="Female - Medium">Female - Medium</option> 
 
<option value="Female - Large">Female - Large</option> 
 
</select> 
 
<br /> 
 
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Male - Small">Male - Small</option> 
 
<option value="Male - Medium">Male - Medium</option> 
 
<option value="Male - Large">Male - Large</option> 
 
</select>

Answer 4

Sie auch die .attr (...) Methode verwendet werden kann, und prüfen Sie, ob die „geprüft“ Attribut gibt es (wenn auch nicht überprüft, es wird nicht definiert und gibt false in der if-Anweisung zurück).

if($('input[value=Female]').attr('checked')){ 
    ... 
} ... 

Hier gehen Sie: https://jsfiddle.net/uf6q6csq/1/

Answer 5

Sie $('input[value=Female]').is('checked') ersetzen durch $(this).val()=='Female' und tun das gleiche

$(document).ready(function() { 
 
    $('input[type=radio]').click(function() { 
 
    
 
    \t if($(this).val()=='Female') { 
 
    \t \t $('.female').show(); 
 
    \t \t $('.male').hide(); 
 
    \t } else if($(this).val()=='Male') { 
 
    \t \t $('.male').show(); 
 
    \t \t $('.female').hide(); 
 
    \t } else { 
 
    \t \t $('.male').hide(); 
 
    \t \t $('.female').hide(); 
 
    \t } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<ul> 
 

 
<li class="input-container"> 
 
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio"> 
 
<label for="3151_55396_8_60103_1">Female</label> 
 
</li> 
 
<li class="input-container"> 
 
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio"> 
 
<label for="3151_55396_8_60103_2">Male</label> 
 
</li> 
 
</ul> 
 

 
<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Female - Small">Female - Small</option> 
 
<option value="Female - Medium">Female - Medium</option> 
 
<option value="Female - Large">Female - Large</option> 
 
</select> 
 
<br /> 
 
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);"> 
 

 
<option value="NOREPLY">Please select response</option> 
 
<option value="Male - Small">Male - Small</option> 
 
<option value="Male - Medium">Male - Medium</option> 
 
<option value="Male - Large">Male - Large</option> 
 
</select>