[英]how to change content to display according to radio button that user select?
我将创建3个单选按钮供用户选择。 一旦用户单击该按钮,它将向用户显示该用户选择的单选按钮的描述。
例如
- if user select first radio button ==> it will show the description under that
radio button
- if user select second radio button ==> it will show the description under that
radio button
- if user select third radio button ==> it will show the description under that
radio button
我的密码
<p><input type='radio' name='content_type' value='1' /> This is content A of request</p>
<p><input type='radio' name='content_type' value='2' /> This is content B of request</p>
<p><input type='radio' name='content_type' value='3' /> This is content C of request</p>
<div id='show'></div>
使用Javascript
$(document).ready(function(){
$('#content_type').on('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
document.getElementById('#show').innerHTML="1st radio button";
break;
case '2':
document.getElementById('#show').innerHTML="2nd radio button";
break;
case '3':
document.getElementById('#show').innerHTML="3rd radio button";
break;
}
});
我上面的代码不起作用。 谁能帮助我显示此问题?
预先感谢
您错误地使用了jQuery选择器。 另外,您需要关闭$(document).ready()。 正确的代码:
$(document).ready(function(){
$('input[name=content_type]').on('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
$('#show').html("1st radio button");
break;
case '2':
$('#show').html("2nd radio button");
break;
case '3':
$('#show').html("3rd radio button");
break;
}
});
});
使用此代码:
$('input[name=content_type]').on('change', function(){
要么
$('input[type=radio]').on('change', function(){
#content_type
表示您正在选择一个ID为content_type的元素。 而且您没有任何元素。
之后,您的JS代码将是:
$(document).ready(function(){
$('input[type=radio]').change(function(){
var n = $(this).val();
switch(n)
{
case '1':
$('#show').html("1st radio button");
break;
case '2':
$('#show').html("2nd radio button");
break;
case '3':
$('#show').html("3rd radio button");
break;
}
});
});
您的选择器有误。
1) 您应该使用input[name=content_type]
代替#content_type
2) 另外,从getElementById中删除#
:
document.getElementById('#show')
应该
document.getElementById('show')
或将其更改为使用jQuery:
$('#show').html("1st radio button");
这是经过修改的html .... i只是在您的消息中添加了一个跨度
<p><input type='radio' class="rad" name='content_type' value='1' /> <span >This is content A of request</span></p>
<p><input type='radio' class="rad" name='content_type' value='2' /> <span>This is content B of request</span></p>
<p><input type='radio' name='content_type' value='3' /> <span>This is content C of request</span></p>
<div id='show'></div>
这是jQuery
$(document).ready(function(){
$('span').hide();
$('input[name="content_type"]').on('change',function(){
$('span').hide();
$(this).next().show();
});
});
这是演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.