Javascript 单选按钮不'；不要正确地拨动开关

我正在处理一个页面，该页面上有一对表示是和否的单选按钮。如果单击是，我希望显示一个特定的div（class=“绿色”），如果单击否，则显示另一个div（class=“蓝色”）。这是一个使用Jquery和Twitter引导的Coldfusion页面。页面位于。有问题的单选按钮位于页面底部附近（您是当前会员吗？）。有关守则的摘录如下：

     <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>

博萨先生{
显示：无；
}.boxB{
显示：无；
}
jQuery（文档）.ready（函数（）{
jQuery（“#当前_成员”）。单击（函数（）{
jQuery（“.green”）.toggle（）；
jQuery（“.blue”）.toggle（）；
});
});
你是现任会员吗？
对
不

HTML元素的“id”属性必须是页面的唯一属性。您有两个具有相同id的不同元素。因此，只有在单击“是”输入时才会调用您定义的单击处理程序。相反，请按如下方式定义您的单击处理程序：

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

HTML元素的“id”属性必须是页面的唯一属性。您有两个具有相同id的不同元素。因此，只有在单击“是”输入时才会调用您定义的单击处理程序。相反，请按如下方式定义您的单击处理程序：

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

---

这里修复的代码几乎没有问题

Html

<div style="font-weight:bold; " align="left">
    Are you a current member?
</div>
    <table width="100%"  valign="top">  
        <tr>
            <td>
            <input type="radio" name="group" id="yes" value="login" /> Yes 
            <input type="radio" name="group" id="no" value="signup" /> No
            </td>
        </tr>
    </table>
<div style="display:none" class="divClass" id="green">
    green
</div>
<div style="display:none" class="divClass" id="blue">
    blue
</div>

---

不能有两个元素具有相同的Id。Id是唯一的。您需要将单选按钮与名称分组，如下所示。对于jquery，您可以使用

隐藏

和

显示

调用来显示div。

这里修复的代码几乎没有问题

Html

<div style="font-weight:bold; " align="left">
    Are you a current member?
</div>
    <table width="100%"  valign="top">  
        <tr>
            <td>
            <input type="radio" name="group" id="yes" value="login" /> Yes 
            <input type="radio" name="group" id="no" value="signup" /> No
            </td>
        </tr>
    </table>
<div style="display:none" class="divClass" id="green">
    green
</div>
<div style="display:none" class="divClass" id="blue">
    blue
</div>

不能有两个元素具有相同的Id。Id是唯一的。您需要将单选按钮与名称分组，如下所示。至于jquery，您可以使用

隐藏

和

显示

调用来显示div。

代码中几乎没有漏洞（错误做法）

不要在DOM中重复Id。Id对于加载的文档来说是相同的，因此您应该始终确保

没有两个元素具有相同的Id

是
否

如果您使用的是无线电组，则所有无线电输入都需要相同的名称，每个输入都需要不同的值。除非您想在特定的收音机上操作，否则不应提供Id（因为这没有用）

是
否

在jQuery更改事件中，您应该获取值而不是Id。这很重要，因为如果您将来使用无线电插件（如iphone checkbox/radio），它将使用“值”而不是Id

if（$（this）.val（）=“登录”）

建议：您可以使用数据属性使代码通用。您不需要硬编码要隐藏/显示的classname&divId

在HTML中：

<input type="radio" name="current_member" value="login" data-show="#green" data-hide=".divContent" /> Yes 
<input type="radio" name="current_member" value="signup" data-show="#blue" data-hide=".divContent" /> No

jsfiddle:

代码中几乎没有漏洞（错误实践）

不要在DOM中重复Id。Id对于加载的文档来说是相同的，因此您应该始终确保

没有两个元素具有相同的Id

是
否

如果您使用的是无线电组，则所有无线电输入都需要相同的名称，每个输入都需要不同的值。除非您想在特定的收音机上操作，否则不应提供Id（因为这没有用）

是
否

在jQuery更改事件中，您应该获取值而不是Id。这很重要，因为如果您将来使用无线电插件（如iphone checkbox/radio），它将使用“值”而不是Id

if（$（this）.val（）=“登录”）

建议：您可以使用数据属性使代码通用。您不需要硬编码要隐藏/显示的classname&divId

在HTML中：

<input type="radio" name="current_member" value="login" data-show="#green" data-hide=".divContent" /> Yes 
<input type="radio" name="current_member" value="signup" data-show="#blue" data-hide=".divContent" /> No

---

jsiddle:

正如大家已经提到的，id应该是唯一的。但是您并不真正需要它们，所以只需删除这两个

id=“current_member”

。那么解决办法是：

$(function(){
  $(":radio[name='current_member']").click(function(){
    var isLogin=this.value==='login';

    $(".green").toggle(isLogin);
    $(".blue").toggle(!isLogin);
  });
});

---

正如大家已经提到的，ID应该是唯一的。但是您并不真正需要它们，所以只需删除这两个

id=“current_member”

。那么解决办法是：

$(function(){
  $(":radio[name='current_member']").click(function(){
    var isLogin=this.value==='login';

    $(".green").toggle(isLogin);
    $(".blue").toggle(!isLogin);
  });
});

---

未捕获类型错误：未定义的不是函数$（“输入[name='group']”）。单击（函数（）{我尝试了更改和单击将您的代码放入JSFIDLE。我无法从中更好地修复它。天哪，发生了一些事情，页面出现了问题。错误我甚至都不理解。请耐心等待我尝试解开它。我似乎有一个我不理解的jQuery问题。但是，目前，我有一个JSFIDLE进行测试，但我没有得到任何e错误。它只是没有显示div。我指定了jQuery 1.7.2。这就是网站上正在使用的。@user990016非常接近，它的

$（this.val（）

不是

$（this.value（）

）。未捕获类型错误：未定义不是函数$（“输入[name='group']）。单击（函数（）{我尝试了更改和单击将您的代码放入JSFIDLE。我无法从中更好地修复它。天哪，发生了一些事情，页面出现了问题。错误我甚至都不理解。请耐心等待我尝试解开它。我似乎有一个我不理解的jQuery问题。但是，目前，我有一个JSFIDLE进行测试，但我没有得到任何e错误。它只是没有显示div。我指定了jQuery 1.7.2。这就是网站上使用的内容。@user990016非常接近，它的

$（this.val（）

不是

$（this.value（）

）。为什么它被标记为ColdFusion？这与ColdFusion（甚至CFML）无关。这是一个标记/JS问题。取消标记为什么标记为ColdFusion？这与ColdFusion（甚至CFML）无关。这是一个标记/JS问题。取消标记