-2

男性と女性のクラスの名前のリストがあります。このページに男性/女性のラジオボタンを追加しました。男性のラジオ ボタンをクリックすると、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>
4

2 に答える 2

3

これには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の無線入力に従う必要があることに注意してください。

于 2012-09-25T13:08:34.843 に答える
0
<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>
于 2012-09-25T13:08:28.120 に答える