Javascript 无法通过所选单选按钮显示/隐藏div_Javascript_Html

Javascript 无法通过所选单选按钮显示/隐藏div

javascript html

Javascript 无法通过所选单选按钮显示/隐藏div,javascript,html,Javascript,Html,在我的注册表格中，用户可以通过代码中给出的4种方式进行注册。但我不知道如何显示和隐藏只有当用户选择折扣或分期付款方式。此代码不起作用 <head> <script type="text/javascript"> $(document).ready(function() { $('input[name=register]').click(function(){ if(this.id=="discount") { $("

在我的注册表格中，用户可以通过代码中给出的4种方式进行注册。但我不知道如何显示和隐藏只有当用户选择折扣或分期付款方式。此代码不起作用

<head>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=register]').click(function(){
        if(this.id=="discount")
        {
            $("#discount").show('slow');
        }
        else
        {
            $("#discount").hide('slow');
        }
        if(this.id=="installment")
        {
            $("#installment").show('slow');
        }
        else
        {
            $("#installment").hide('slow');
        }

});
});
</script>
</head>

<body>
<form id="reg" method="post" action="">
<table width="400" border="1">
  <tr><caption>Register</caption>
    <td>1.</td>
    <td><input type="radio" name="register" value="regpaid" />Paid
    <input type="radio" name="register" value="regfree" />Free
    <input type="radio" id="discount" name="register" value="chkdis" onclick="checkdiscount()" />Discount
    <input type="radio" id="installment" name="register" value="chkinst" onclick="checkinstallment()" />Installment
  <div id="discount" style="display:none">
  Paid <input name="paid" type="text" />
  Dsicount <input name="dis" type="text" /></div>
  <div id="installment" style="display:none">
  Paid <input name="amtpaid" type="text" />
  Due <input name="due" type="text" /></div>
</td>
  </tr>
</table>

</form>
</body>


$（文档）.ready（函数（）{
$（'input[name=register]'）。单击（函数（）{
if（this.id==“折扣”）
{
美元（“#折扣”）.show（'slow'）；
}
其他的
{
$（“#折扣”）.hide（'slow'）；
}
if（this.id==“分期付款”）
{
美元（“#分期付款”）.show（'slow'）；
}
其他的
{
$（“分期付款”）.hide（'slow'）；
}
});
});
登记
1.
支付
自由的
优惠
分期付款
支付
DSI计数
支付
应得的

我需要帮助。提前感谢。

您的div和单选按钮具有相同的ID。重命名div ID

还包括JQuery并在javascript中正确重命名ID

$（文档）.ready（函数（）{
$（'input[name=register]'）。单击（函数（）{
如果（this.id==“折扣”）{
$（“#折扣div”）.show（'slow'）；
}否则{
$（“#折扣div”）.hide（'slow'）；
}
如果（this.id==“分期付款”）{
$（“#installmentDiv”）.show（'slow'）；
}否则{
$（“#installmentDiv”）.hide（'slow'）；
}
});
});

登记
1.
支付
自由的
优惠
分期付款
支付
DSI计数
支付
应得的

$（'input[type=“radio”]”）。单击（函数（）{
如果（$（this）.attr（'id'）=='deploy'）{
$（'折扣1'）。显示（'慢'）；
$（'#installament1'）。隐藏（'slow'）；
}
如果（$（this.attr（'id'）=='分期付款'）{
$（'安装1'）。显示（'慢'）；
$（'#折扣1'）。隐藏（'slow'）；
}
});


给你
 一种解决方案是使所有ID都唯一，然后将'-div'
附加到可展示元素中，这样我们就可以说“如果我选择了#kittens，那么显示#kittens div”。例如：

$（文档）.ready（函数（）{
$（'input[name=register]'）。单击（函数（）{
//使用属性选择器(http://api.jquery.com/attribute-ends-with-selector/)把那两张桌子藏起来
$（“[id$='-div']”）.hide（“slow”）；//隐藏id以'-div'结尾的所有div
//获取单击的元素的id
var id=$（this.attr（“id”）；//例如“折扣”
//并显示任何匹配的元素
$（“#”+id+“-div”）.show（'slow'）；//例如“#折扣div”
});
});

登记
1.
支付
自由的
优惠
分期付款
支付
DSI计数
支付
应得的
如果用户单击折扣或分期付款单选按钮，则只应打开div的内容，您是否可以更清楚地了解您想要什么，您想要实现什么并不明显。根据选择，有两个div-合适的div应该是可见的。id应该是唯一的我是否需要在单选按钮中的onclick（）中做一些更改？这些单选按钮onclick甚至不是必需的。如果用户选择“付费”或“免费”单选选项，则不会隐藏div。这是很酷的代码，但如果选择“付费”或“免费”，则我还想隐藏div。怎么做
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        $('input[type="radio"]').click(function() {
           if($(this).attr('id') == 'discount') {
                $('#discount1').show('slow');  
               $('#installment1').hide('slow'); 
           }
           if($(this).attr('id') == 'installment') {
                $('#installment1').show('slow');  
               $('#discount1').hide('slow'); 
           }
       });