javascript - 单选按钮无法正确切换

Question

我正在开发一个页面，该页面有一对"is"和“否”的单选按钮。如果单击"is"，我想显示一个特定的 div (class="green")，如果单击“否”，则显示另一个 div (类=“蓝色”)。这是一个使用 Jquery 和 Twitter bootstrap 的 Coldfusion 页面。页面位于http://dev.taxtalent.com/employers/post-a-tax-job-new?adtype=Basic 。有问题的单选按钮位于页面底部附近(您是当前成员(member)吗？)。相关代码的摘录是；

     <style>

        .boxA{
            <cfif current_member_flag NEQ "true">display: none;</cfif>
        }.boxB{
            <cfif signup_member_flag NEQ "true">display: none;</cfif>
        }
    </style>

    <script type="text/javascript">
        jQuery(document).ready(function(){

            jQuery('#current_member').click(function(){
                jQuery(".green").toggle();
                jQuery(".blue").toggle();
            });
    });
</script>

<div style="font-weight:bold; " align="left">
    Are you a current member?
</div>
    <table width="100%"  valign="top">  
        <tr>
            <td>
            <input type="radio" name="current_member" id="current_member" value="login" /> Yes 
            <input type="radio" name="current_member" id="current_member" value="signup" /> No
            </td>
        </tr>
    </table>

Answer 1

HTML 元素的“id”属性对于页面来说必须是唯一的。您有两个具有相同 id 的不同元素。因此，仅当单击"is"输入时才会调用您定义的单击处理程序。相反，请像这样定义您的点击处理程序:

jQuery("input[name='current_member']").click(function(){ ... }