如何使用.nextAll() (或其他方法)清除当前输入之后的其他无线输入

Question

JSFiddle

我希望能够清除所有单选按钮，这些单选按钮是我的父div下载的兄弟。例如，如果选择了单选按钮选项2的选项1，我希望清除单选按钮选项3和单选按钮选项4中的值。

$('input:radio[name=radio-choice-2]').change(
    function () {
        if ($(this).val() == 'choice-1') {
            $(this).parent().nextAll('div :radio').removeAttr('checked');
        }   
    });
<form method="post" action="">
    <div id="question-1">
         <h4>Radio Button Choice 1</h4>

        <label for="radio-choice-1-a" class="checkbox inline">Choice 1
            <input type="radio" name="radio-choice-1" id="radio-choice-1-a" tabindex="2" value="choice-1" />
        </label>
        <label for="radio-choice-1-b" class="checkbox inline">Choice 2
            <input type="radio" name="radio-choice-1" id="radio-choice-1-b" tabindex="3" value="choice-2" />
        </label>
    </div>
    <div id="question-2" class="collapse-group">
         <h4>Radio Button Choice 2</h4>

        <label for="radio-choice-2-a">Choice 1</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-2-a" tabindex="2" value="choice-1" />
        <label for="radio-choice-2-b">Choice 2</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-2-b" tabindex="3" value="choice-2" />
    </div>
    <div id="question-3" class="collapse-group">
         <h4>Radio Button Choice 3</h4>

        <label for="radio-choice-3-a">Choice 1</label>
        <input type="radio" name="radio-choice-3" id="radio-choice-3-a" tabindex="2" value="choice-1" checked />
        <label for="radio-choice-3-b">Choice 2</label>
        <input type="radio" name="radio-choice-3" id="radio-choice-3-b" tabindex="3" value="choice-2" />
    </div>
    <div id="question-4" class="collapse-group">
         <h4>Radio Button Choice 4</h4>

        <label for="radio-choice-4-a">Choice 1</label>
        <input type="radio" name="radio-choice-4" id="radio-choice-4-a" tabindex="2" value="choice-1" checked />
        <label for="radio-choice-4-b">Choice 2</label>
        <input type="radio" name="radio-choice-4" id="radio-choice-4-b" tabindex="3" value="choice-2" />
    </div>
</form>

Answer 1

$('input:radio').change(function () {
    $(this).parents('div').nextAll('div').each(function () {
        $(this).find(':input').prop('checked',false);
    });
});

Answer 2

试一试

$('input:radio').change(function () {   
   $(this).closest('div[id^="question"]').nextAll('div[id^="question"]').find(':radio').prop('checked', false)
});

演示：Fiddle

Answer 3

所以问题是，使用传统的DOM遍历方法，您需要向上遍历树，进一步遍历，然后向下遍历-但是进一步向上和向下多少并不是函数的固有特性。您想要的是将DOM看作一个线性序列，并选择出现在所讨论的单选按钮之后的所有单选按钮-无论它们是如何嵌套的。

不久前，我为此编写了一个插件：jQuery sequential traversal。

使用它，获取您想要的无线电的代码如下所示：

$(this).sequentialNextAll(':radio').removeAttr('checked');

I forked your fiddle来显示它与原始文件的差别有多小。