demo

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 }

demo

同时为两个单选按钮（在这种情况下为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>

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

2 个答案:

demo