JQUERY find top parent and get divs in it except this

Question

Hi,

1) when i clicked to any checkbox, 
  a) i want to select radio in the same div 
  b) unselect the other radios with their checkboxes. 

2) When i click to radio, 
  a) select all checkboxes in the same div.
  b) uncheck the other radios

3) is there any way to get parents without its first parent div?

How can i do that?

<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

Make sure that all the radio buttons share the same name:

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

Then try the following code (I haven't tested it):

$('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');
    });
});

What happens here?

The first part loops through the checkboxes in the div and attaches an event handler to each of them. This event handler checks the radio button in the same div.

Similarly, the second part loops through the radio buttons in the div attaches an event handler that checks all the checkboxes in the same div.

If you didn't forget to make sure that the radio buttons have the same name, unchecking the other radio buttons should be done automatically by the browser.

Answer 2

This should work and be much more efficient than DrJokepu's:

$(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');
    });
});

As a side note, you should make sure the radio buttons all have the same name in order to be stardards compliant...

If there is some odd reason why you can't do that, you can change the last line of the checkbox binding block (as unsightly as it may be) to:

$(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 3

// 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');
    }
});

This will unselect the checkboxes in any other radio option check groups. Same notice as the other people RE: the radio options needing a common name.