jQuery 单选按钮、标签、更改和单击事件
我正在尝试开发一个具有多个单选按钮的表单。选择一个单选按钮将显示一组与该单选按钮相关的选项。单击标签(在本例中为图像)应该执行相同的操作。我的单选按钮部分正常工作,但标签有问题。单击标签会选择正确的单选按钮...但不会显示该按钮的内容。我知道我可以像解决单选按钮更改事件一样解决这个问题,但我不想引入超出我需要的代码。话虽这么说,我也知道必须有一种更有效的方法来处理单选按钮更改事件,因为它们都做同样的事情,只有值在变化。
这是我正在使用的内容的精简版本。我正在寻找有人帮助我正确地完成这项工作,并且同样重要的是,解决我的编码方法中的低效率问题。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#contain-me .option').hide();
$('#contain-me .option.option-1').addClass('chosen').show();
$('.label').click(function() {
$(this).prev('input[type=radio]:first').attr('checked', 'checked');
});
$("#payment-visual-selector :radio[name='pt']").change(function(){
var newVal = $(":radio[name='pt']:checked").val();
if (newVal === "1") {
$('#contain-me .option').hide();
$('#contain-me .option.option-1').addClass('chosen').show();
} else if (newVal === "2") {
$('#contain-me .option').hide();
$('#contain-me .option.option-2').addClass('chosen').show();
} else if (newVal === "3") {
$('#contain-me .option').hide();
$('#contain-me .option.option-3').addClass('chosen').show();
} else if (newVal === "4") {
$('#contain-me .option').hide();
$('#contain-me .option.option-4').addClass('chosen').show();
} else if (newVal === "5") {
$('#contain-me .option').hide();
$('#contain-me .option.option-5').addClass('chosen').show();
} else if (newVal === "6") {
$('#contain-me .option').hide();
$('#contain-me .option.option-6').addClass('chosen').show();
}
});
});
</script>
</head>
<body>
<h3>Visual Selector</h3>
<div class="row" id="payment-visual-selector">
<p><input type="radio" value="1" id="pt-1" name="pt" class="option-1 radio" checked="checked" /><label class="label" for="pt-1"><img src="img/icon-1a.gif" alt="icon-1a" class="option-1" /> <img src="img/icon-1b.gif" alt="icon-1b" class="option-1" /> <img src="img/icon-1c.gif" alt="icon-1c" class="option-1" /> <img src="img/icon-1d.gif" alt="icon-1d" class="option-1" /></label></p>
<p><input type="radio" value="2" id="pt-2" name="pt" class="option-2 radio" /><label class="label" for="pt-2"><img src="img/icon-2.gif" alt="icon-2" class="option-2" /></label> <a href="#" class="additional-info">Link for Option #2</a></p>
<p><input type="radio" value="3" id="pt-3" name="pt" class="option-3 radio" /><label class="label" for="pt-3"><img src="img/icon-3.gif" alt="icon-3" class="option-3" /></label> <a href="#" class="additional-info">Link for Option #3</a></p>
<p><input type="radio" value="4" id="pt-4" name="pt" class="option-4 radio" /><label class="label" for="pt-4"><img src="img/icon-4.gif" alt="icon-4" class="option-4" /></label></p>
<p><input type="radio" value="5" id="pt-5" name="pt" class="option-5 radio" /><label class="label" for="pt-5"><img src="img/icon-5.gif" alt="icon-5" class="option-5" /></label></p>
<p><input type="radio" value="6" id="pt-6" name="pt" class="option-6 radio" /><label class="label" for="pt-6"><img src="img/icon-6.gif" alt="icon-6" class="option-6" /></label></p>
<div class="clear"></div>
</div>
<h3>Content Block</h3>
<div id="contain-me">
<div class="option option-1">
Option 1 content goes here
</div>
<div class="option option-2">
Option 2 content goes here
</div>
<div class="option option-3">
Option 3 content goes here
</div>
<div class="option option-4">
Option 4 content goes here
</div>
<div class="option option-5">
Option 5 content goes here
</div>
<div class="option option-6">
Option 6 content goes here
</div>
</div>
</body>
</html>
I'm trying to develop a form piece that has multiple radio buttons. Selecting a radio button will display a set of options relating to that radio button. Clicking on the label (which will be an image in this case) should do the same. I have the radio button part working and am having trouble with the labels. Clicking on a label selects the correct radio button... but the content for that button is not displayed. I know I can probably work around this in the same way I am addressing the radio button change events, but I don't want to introduce more code than I need. With that being said, I also know there has to be a more efficient way to tackle the radio button change events since they all do the same thing and only the value is changing.
Here's a stripped-down version of what I am working with. I'm looking for someone to help me make this work correctly and, equally as important, address the inefficiencies in my coding approach.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#contain-me .option').hide();
$('#contain-me .option.option-1').addClass('chosen').show();
$('.label').click(function() {
$(this).prev('input[type=radio]:first').attr('checked', 'checked');
});
$("#payment-visual-selector :radio[name='pt']").change(function(){
var newVal = $(":radio[name='pt']:checked").val();
if (newVal === "1") {
$('#contain-me .option').hide();
$('#contain-me .option.option-1').addClass('chosen').show();
} else if (newVal === "2") {
$('#contain-me .option').hide();
$('#contain-me .option.option-2').addClass('chosen').show();
} else if (newVal === "3") {
$('#contain-me .option').hide();
$('#contain-me .option.option-3').addClass('chosen').show();
} else if (newVal === "4") {
$('#contain-me .option').hide();
$('#contain-me .option.option-4').addClass('chosen').show();
} else if (newVal === "5") {
$('#contain-me .option').hide();
$('#contain-me .option.option-5').addClass('chosen').show();
} else if (newVal === "6") {
$('#contain-me .option').hide();
$('#contain-me .option.option-6').addClass('chosen').show();
}
});
});
</script>
</head>
<body>
<h3>Visual Selector</h3>
<div class="row" id="payment-visual-selector">
<p><input type="radio" value="1" id="pt-1" name="pt" class="option-1 radio" checked="checked" /><label class="label" for="pt-1"><img src="img/icon-1a.gif" alt="icon-1a" class="option-1" /> <img src="img/icon-1b.gif" alt="icon-1b" class="option-1" /> <img src="img/icon-1c.gif" alt="icon-1c" class="option-1" /> <img src="img/icon-1d.gif" alt="icon-1d" class="option-1" /></label></p>
<p><input type="radio" value="2" id="pt-2" name="pt" class="option-2 radio" /><label class="label" for="pt-2"><img src="img/icon-2.gif" alt="icon-2" class="option-2" /></label> <a href="#" class="additional-info">Link for Option #2</a></p>
<p><input type="radio" value="3" id="pt-3" name="pt" class="option-3 radio" /><label class="label" for="pt-3"><img src="img/icon-3.gif" alt="icon-3" class="option-3" /></label> <a href="#" class="additional-info">Link for Option #3</a></p>
<p><input type="radio" value="4" id="pt-4" name="pt" class="option-4 radio" /><label class="label" for="pt-4"><img src="img/icon-4.gif" alt="icon-4" class="option-4" /></label></p>
<p><input type="radio" value="5" id="pt-5" name="pt" class="option-5 radio" /><label class="label" for="pt-5"><img src="img/icon-5.gif" alt="icon-5" class="option-5" /></label></p>
<p><input type="radio" value="6" id="pt-6" name="pt" class="option-6 radio" /><label class="label" for="pt-6"><img src="img/icon-6.gif" alt="icon-6" class="option-6" /></label></p>
<div class="clear"></div>
</div>
<h3>Content Block</h3>
<div id="contain-me">
<div class="option option-1">
Option 1 content goes here
</div>
<div class="option option-2">
Option 2 content goes here
</div>
<div class="option option-3">
Option 3 content goes here
</div>
<div class="option option-4">
Option 4 content goes here
</div>
<div class="option option-5">
Option 5 content goes here
</div>
<div class="option option-6">
Option 6 content goes here
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在收紧代码方面,这里是一个开始:
对于单选按钮
change
事件未由标签点击触发的问题,请尝试如下操作:In terms of tightening up the code, here's a start:
For the problem with the radio button
change
event not being triggered by the label click, try something like this: