JQUERY will find the main parent and get divs in it besides this
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 this?
<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>
a source to share
Make sure all radio buttons have 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's going on here?
The first part goes through the checkboxes in the div and attaches an event handler to each one. This event handler checks for a radio button in the same div.
Likewise, the second part, going through the radio buttons in the div, attaches an event handler that checks all the check boxes in the same div.
If you remember to make sure that the radio buttons have the same name, disarming the other switches should be done automatically by the browser.
a source to share
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 all radio buttons have the same name to be standards compliant ...
If there is some odd reason why you can't do this, you can change the last line of the checkbox binding block (as unsightly as it can be):
$(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');
a source to share
// 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 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');
}
});
Deselect the check boxes in any other radio parameter check group. Same notice as other RE people: radio options requiring a common name.
a source to share