javascript - 显示和隐藏名称列表，带有两个带有单选按钮 jquery 的类

Question

我有一个男性和女性班级的名字列表。我在此页面上添加了男性/女性单选按钮。当我单击男性单选按钮时，将显示所有带有 class=male 的名称，反之亦然。你能为此建议一个好的jquery方法吗？

<input id="male" value="Male" type="radio" checked="checked">
<input id="female" value="Female" type="radio"> 

<div class="Male">male name</div>
<div class="female">female name</div>
<div class="Male">male name</div>

Answer 1

为此，您不需要 JavaScript。刚设置

.male, .female { display: none }
#male:checked ~ .male, #female:checked ~ .female { display: block }

演示

还要为两个单选按钮（在这种情况下）添加一个name具有相同值的属性，name="gender"以确保它们的行为类似于单选按钮并且不能一次检查。

<input id="male" value="Male" name="gender" type="radio" checked>
<input id="female" value="Female" name="gender" type="radio"> 

请注意，为了使其工作，具有名称的 div 必须遵循 HTML 中的单选输入。

Answer 2

<input id="male" value="Male" type="radio" onclick="doaction('Male,female')" checked>

    <input id="female" value="Female"  onclick="doaction('female,Male')"  type="radio"> 

    <div class="Male">male name</div>
    <div class="female">female name</div>
    <div class="Male">male name</div>

    <script>

    function doaction(z,z2)
    {
    $("." + z2).hide();
    $("." + z).show();

    }

</script>