JQUERY找到顶级父并在其中获取div，除了这个

Question

1）当我点击任何复选框时， a) 我想在同一个 div 中选择收音机 b) 使用复选框取消选择其他收音机。 2）当我点击收音机时， a) 选中同一 div 中的所有复选框。 b) 取消选中其他收音机 3）有没有办法让父母没有第一个父母div？

我该怎么做？

<div class="topDiv">
    <div class="repeaterDiv"><input type="radio" id="rpt_01_rb" />
        <input type="checkbox" id="rpt_01_cb1" />
        <input type="checkbox" id="rpt_01_cb2" />
        <input type="checkbox" id="rpt_01_cb3" />
    </div>
    <div class="repeaterDiv"><input type="radio" id="rpt_02_rb" />
        <input type="checkbox" id="rpt_02_cb1" />
        <input type="checkbox" id="rpt_02_cb2" />
        <input type="checkbox" id="rpt_02_cb3" />
    </div>
    <div class="repeaterDiv"><input type="radio" id="rpt_03_rb" />
        <input type="checkbox" id="rpt_03_cb1" />
        <input type="checkbox" id="rpt_04_cb2" />
        <input type="checkbox" id="rpt_05_cb3" />
    </div>
</div>

Answer 1

这应该比 DrJokepu 的更有效：

$(function() {
    $('.repeaterDiv>:radio').bind('click',function() {
        $('.repeaterDiv>:checkbox').removeAttr('checked');
        $(this).siblings(':checkbox').attr('checked','checked');
    });

    $('.repeaterDiv>:checkbox').bind('click',function() {
        $('.repeaterDiv>:checkbox').removeAttr('checked');
        $(this).attr('checked','checked').siblings(':radio').attr('checked','checked');
    });
});

附带说明，您应该确保所有单选按钮都具有相同的名称，以便符合标准...

如果有一些奇怪的原因导致您不能这样做，您可以将复选框绑定块的最后一行（尽管可能不美观）更改为：

$(this)
    .attr('checked','checked')
    .parent().siblings('.repeaterDiv').find(':radio')
    .removeAttr('checked');

    // I prefer to break the chain here but...
    // you could continue the above chain by doing: 
    // '.end().end().end().siblings(':radio').attr('checked','checked');'

$(this).siblings(':radio').attr('checked','checked');

Answer 2

// when a radio is clicked, unselect any checkboxes in other groups
$('div.topDiv input[type=radio]').click(function() {
    $('div.topDiv div.repeaterDiv').not($(this).parent(".repeaterDiv")).children("input[type=checkbox]").attr('checked', '');
});

// when a checkbox is checked, and it's radio isn't, "click" its radio
// which in turn unchecks other boxes using event defined above
$('div.topDiv input[type=checkbox]').click(function() {
    if (!$(this).siblings('input[type=radio]').attr('checked')) {
        $(this).siblings('input[type=radio]').trigger('click');
    }
});

这将取消选中任何其他单选选项检查组中的复选框。与其他人相同的注意事项 RE：需要通用名称的单选选项。

Answer 3

确保所有单选按钮名称相同：

<input type="radio" id="rpt_01_rb" name="rpt_rb" />
<input type="radio" id="rpt_02_rb" name="rpt_rb" />
// etc...

那就试试下面的代码（我没测试过）：

$('div.repeaterDiv>input[type=checkbox]').each(function(idx, item)
{
    $(item).click(function()
    {
        $(item).siblings('input[type=radio]:first').attr('checked', 'checked');
    });
});

$('div.repeaterDiv>input[type=radio]').each(function(idx, item)
{
    $(item).click(function()
    {
        $(item).siblings('input[type=checkbox]').attr('checked', 'checked');
    });
});

这里发生了什么？

第一部分循环遍历 div 中的复选框，并为每个复选框附加一个事件处理程序。此事件处理程序检查同一 div 中的单选按钮。

同样，第二部分循环遍历 div 中的单选按钮，并附加一个事件处理程序，用于检查同一 div 中的所有复选框。

如果您没有忘记确保单选按钮具有相同的名称，取消选中其他单选按钮应该由浏览器自动完成。