0

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>
4

3 回答 3

1

尝试

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

演示：小提琴

于 2013-04-26T15:49:02.323 回答
0 
$('input:radio').change(function () {
    $(this).parents('div').nextAll('div').each(function () {
        $(this).find(':input').prop('checked',false);
    });
});

jsFiddle 示例

于 2013-04-26T15:47:27.957 回答
0

所以问题在于，使用传统的 DOM 遍历方法，您需要向上走，再越过，然后向下——但是向上和向下走多远并不是该函数真正固有的。您想要将 DOM 视为一个线性序列，并选择出现在相关单选按钮之后的所有单选按钮 - 无论它们是如何嵌套的。

不久前，我为此编写了一个插件：jQuery 顺序遍历。

使用它，获取您想要的收音机的代码如下：

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

我分叉了你的小提琴，以展示它与你的原作有多么小的区别。

于 2013-04-26T15:55:12.380 回答