Question

我正在制作一个页面，其中有一对单选按钮，用于是＆amp;否。如果单击是，我想显示特定的div（class =“green”），如果单击No，则显示不同的div（class =“blue”）。这是一个使用Jquery和Twitter bootstrap的Coldfusion页面。该页面位于http://dev.taxtalent.com/employers/post-a-tax-job-new?adtype=Basic。有问题的单选按钮位于页面底部附近（您是当前成员吗？）。有问题的代码的摘录是;

     <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

＆＃34; id＆＃34; HTML元素的属性必须是页面唯一的。您有两个具有相同ID的不同元素。因此，您定义的点击处理程序仅在＆＃34;是＆＃34;单击输入。相反，定义您的点击处理程序如下：

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

Answer 2

此处修复的代码几乎没有问题。

http://jsfiddle.net/tk622pua/

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

<强> Jquery的

$(document).ready(function(){

    $("input[name='group']").change(function(){
        $(".divClass").hide()
        if($(this).attr('id') == "yes"){
            $("#green").show()
        }else{
            $("#blue").show()
        }
    });
});

您不能拥有2个具有相同ID的元素。 Id是独一无二的。您需要使用下面的名称对单选按钮进行分组。对于jquery，您可以使用hide和show调用来显示div。

Answer 3

您的代码中存在漏洞（不良做法）。

不要在DOM中重复Id。对于加载的Document，Id被认为是相同的，因此您应始终确保No two elements have same Id。

<input type="radio" name="current_member" id="current_member1" value="login" /> Yes <input type="radio" name="current_member" id="current_member2" value="signup" /> No
如果您使用的是无线电组，则只需要为所有无线电输入指定相同的名称，并为每个无线电输入设置不同的值。在您想要在特定无线电上操作之前，您不应该提供Id（因为这是没用的）。

<input type="radio" name="current_member" value="login" /> Yes <input type="radio" name="current_member" value="signup" /> No
在jQuery更改事件中，您应该获取值而不是Id。这很重要，因为如果你将来使用无线电插件（比如iphone复选框/收音机），它会使用'value'而不是id。

if($(this).val() == "login")
建议：您可以使用数据属性来使代码具有通用性。你不需要硬编码classname＆amp;你要隐藏/显示的divId。

：

<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

在jQuery中：

$("input[name='group']").change(function () {
        var divToHide = $(this).data('hide');
        var divToShow = $(this).data('show');
        $(divToHide).hide();
        $(divToShow).show();
});

jsfiddle：http://jsfiddle.net/tk622pua/1/

Answer 4

正如大家已经提到的，ID应该是唯一的。但是你并不真正需要它们，所以只需删除两个id="current_member"即可。然后解决方案是：

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

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

单选按钮不能正确切换

4 个答案: