[英]Next/Previous buttons for Radio
I'm trying to add "Next" & "Previous" buttons to a radio style navigation.我正在尝试将“下一个”和“上一个”按钮添加到单选样式导航中。
HTML HTML
<div class="month-picker">
<button type="buton" class="month-picker-nav" onclick="dayNavigation('prev');"><</button>
<fieldset class="month-picker-fieldset">
<input type="radio" name="month" value="day1" id="day1" checked="checked">
<label for="day1" class="month-picker-label">Day 1</label>
<input type="radio" name="month" value="day2" id="day2">
<label for="day2" class="month-picker-label">Day 2</label>
<input type="radio" name="month" value="day3" id="day3">
<label for="day3" class="month-picker-label">Day 3</label>
<input type="radio" name="month" value="day4" id="day4">
<label for="day4" class="month-picker-label">Day 4</label>
<input type="radio" name="month" value="day5" id="day5">
<label for="day5" class="month-picker-label">Day 5</label>
<input type="radio" name="month" value="day6" id="day6">
<label for="day6" class="month-picker-label">Day 6</label>
</fieldset>
<button type="buton" class="month-picker-nav" onclick="dayNavigation('next');">></button>
</div>
JAVASCRIPT: JAVASCRIPT:
dayNavigation = function (direction) {
var all = $('.month-picker-fieldset input:radio');
var current = $('.month-picker-fieldset input:radio:checked');
var index;
if (direction == 'prev') {
index = all.index(current) - 1;
} else {
index = all.index(current) + 1;
}
all.eq(index).attr('checked', 'checked');
return false;
};
Fiddle: http://jsfiddle.net/hTgv3/5/小提琴: http://jsfiddle.net/hTgv3/5/
My problem is that the previous button doesn't work, and once the selection or "click" has been invoked manually, the next button no longer works.我的问题是上一个按钮不起作用,一旦手动调用选择或“单击”,下一个按钮就不再起作用。
You should use a click instead of setAttribute to perform the proper action:您应该使用单击而不是 setAttribute 来执行正确的操作:
all.eq(index).click();
Also, you need to check if the index is greater or equal to the max list size.此外,您需要检查索引是否大于或等于最大列表大小。 If it is, loop back to first element (0):如果是,则循环回第一个元素 (0):
if(index >= all.size()) index = 0;
http://jsfiddle.net/samliew/hTgv3/11/ http://jsfiddle.net/samliew/hTgv3/11/
change the "attr" to "prop".. ala将“attr”更改为“prop”.. ala
all.eq(index).prop('checked', 'checked');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.