從選定的單選按鈕中選擇下一個單選按鈕

Question

我有一個單選按鈕組，我想選擇所選按鈕之一。

$(document).ready(function() { 
 
    $('.next').click(function() { 
 
    $("input[name=choice]:checked").next().click(); 
 
    }); 
 
});

.button { 
 
    display: inline-block; 
 
    padding: 1em; 
 
    margin: 20px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" id="choise_1" name="choice" checked="checked" /> 
 
<label for="choise_1">One</label> 
 

 
<input type="radio" id="choise_2" name="choice" /> 
 
<label for="choise_2">Two</label> 
 

 
<input type="radio" id="choise_3" name="choice" /> 
 
<label for="choise_3">Three</label> 
 

 
<div class="button next">SELECT NEXT</div>

這是我有，但它是不工作

Answer 1

代碼的變化是，你不必觸發click來檢查radio，而不是你可以用.prop()方法更改屬性checked。

需要.nextAll(':radio:first')：

描述：獲取每個元素的所有兄弟姐妹以下集合中匹配的元素，任選由選擇過濾。

這裏.nextAll(filter)用這種方法你不必擔心你的設計是否改變或者你在列表中添加了另一個元素。它將始終以:radio爲目標，直到它共享相同的父級。

$(document).ready(function() { 
 
    $('.next').click(function() { 
 
    $("input[name=choice]:checked").nextAll(':radio:first').prop('checked', true); 
 
    }); 
 
});

.button { 
 
    display: inline-block; 
 
    padding: 1em; 
 
    margin: 20px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" id="choise_1" name="choice" checked="checked" /> 
 
<label for="choise_1">One</label> 
 

 
<input type="radio" id="choise_2" name="choice" /> 
 
<label for="choise_2">Two</label> 
 

 
<input type="radio" id="choise_3" name="choice" /> 
 
<label for="choise_3">Three</label> 
 

 
<div class="button next">SELECT NEXT</div>

Answer 2

試試這個fiddle（只是確保下一個（）被調用兩次，因爲有兩個複選框之間的標籤）

$('.next').click(function() { 
    $("input[name=choice]:checked").next().next().click(); 
}); 

next()剛剛得到緊隨其後的兄弟姐妹。

在樹中的下一個元素是標籤，所以你需要使用下一個（）兩次獲得下一個單選按鈕