[英]Next/Previous buttons for Radio
我正在嘗試將“下一個”和“上一個”按鈕添加到單選樣式導航中。
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:
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;
};
小提琴: http://jsfiddle.net/hTgv3/5/
我的問題是上一個按鈕不起作用,一旦手動調用選擇或“單擊”,下一個按鈕就不再起作用。
您應該使用單擊而不是 setAttribute 來執行正確的操作:
all.eq(index).click();
此外,您需要檢查索引是否大於或等於最大列表大小。 如果是,則循環回第一個元素 (0):
if(index >= all.size()) index = 0;
將“attr”更改為“prop”.. ala
all.eq(index).prop('checked', 'checked');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.