是否有更好的替代jQuery切换()来显示/隐藏文本？

Question

我试图在表单中显示/隐藏带有特定.class的文本扩展。通过选择带有正确.class的rodio，扩展应该显示。在表单中选择任何其他选项时，扩展应该隐藏。我尝试使用jQuery切换()函数，但是通过第二次单击任何一个收音机，扩展--不管选择与否--再次显示或隐藏。

只有当选择了带有此.class的收音机时，它才会显示：

span class="span_home_2“

我试过的切换()是这样的：

jQuery：

$(document).ready(function(){
    $("input").click(function(){
        $(".span_home_2").toggle();
    });
});

HTML：

<form class="banner_location_box">
    <label class="label_head">
        <?php echo $lang ['select_page']; ?>
    </label>
    <br/>
    <label class="select_page">
        <input type="radio" class="select_location" name="page_id" value="1" checked="checked"/>
        <span><?php echo $lang ['home']; ?><span class="span_home_2">(<?php echo $lang ['available_only']; ?>)</span></span>
    </label>
    <br/>
    <label class="select_page">
        <input type="radio" class="select_location" name="page_id" value="2"/>
        <span><?php echo $lang ['business']; ?></span>
    </label>
    <br/>
    <label class="select_page">
        <input type="radio" class="select_location" name="page_id" value="3"/>
        <span><?php echo $lang ['jobs']; ?></span>
    </label>
    <br/>
</form>

有更好的办法吗？

Answer 1

试试这个：

$(document).ready(function () {
    $("input").click(function () {
        $(this).parent().find("span").toggle();
    });
});

演示这里

另一种选择：

Answer 2

改变这一点：

$("input").click(function(){
    $("span").toggle();
});

对此：

$("input").click(function(){
    $("span.span_home_2").toggle();
});

Answer 3

$(document).ready(function(){
     $("input").click(function(){
          $(".span_home_2").toggle();
     });
});