附加NEXT和PREVIOUS到单选按钮
Append NEXT and PREVIOUS to RADIO BUTTON
我已经被代码困了几天了,我真正想做的是在单选按钮上附加NEXT和PREVIOUS(链接/按钮)。
<div id="slides">
<ul class="options-list">
<li>
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</ul>
</div>
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
<div class="clear"></div>
</div>
我在这里要做的是,当我点击下一步时,它会选择它下面的单选按钮,所以上面的代码有bundle-73, bundle-72和bundle-74,如果默认选择是bundle-73,当我点击下一步时,它应该选择bundle-72。
你的HTML看起来坏了,所以我假设你真的是这个意思:
<div id="slides">
<ul class="options-list">
<li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73"></li>
<li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
<li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
</ul>
</div>
那么你的下一个动作看起来像这样:
$('#next').click(function() {
var $all = $('.getradiotomove'); // Get them all
var $current = $('.getradiotomove:checked'); // Get the current one
var index = $all.index($current) + 1; // Find the index of the next one
if(index >= $all.length) // Wrap around at the end
index = 0;
$($all[index]).attr('checked', 'checked'); // Check it.
});
演示:http://jsfiddle.net/ambiguous/hTgv3/1/
假设您只有一组单选按钮。
你应该能够自己整理出之前的动作。
引用:
-
index
函数
:checked
选择器可能是这样的?
<ul class="options-list">
<li>
<input type="radio" name="bundle_option" value="73">
</li>
<li>
<input type="radio" name="bundle_option" value="72">
</li>
<li>
<input type="radio" name="bundle_option" value="74">
</li>
</ul>
和javascript:
$('#next').click(function(){
$('[name=bundle_option]:checked').parent().next().children('[name=bundle_option]').attr('checked', true);
return false;
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#next').click(function() {
var checkedOp = $('input[name=bundle_option]:checked')
var match = checkedOp.next('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').next('input[name=bundle_option]').attr('checked', 'checked');
});
$('#prev').click(function() {
var checkedOp = $('input[name=bundle_option]:checked');
var match = checkedOp.prev('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').prev('input[name=bundle_option]').attr('checked', 'checked');
});
}
);
</script>
</head>
<body>
<div id="slides">
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73" checked="checked">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</div>
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
<div class="clear"></div>
</div>
</body>
</html>
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时,jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 客户端单选按钮列表验证
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 单击时如何更改单选按钮的CSS
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 注入Javascript以选择具有指定值的所有单选按钮
- 复选框/单选按钮-添加所选项目的总价
- 如何使用单选按钮设置cookie值
- Html按钮点击事件未触发单选按钮
- 附加NEXT和PREVIOUS到单选按钮