I asked a similar question yesterday, but this scenario is a bit different, because there are several radio options (can be any number of them), and I need for either of them to select the sibling checkboxes (that will be hidden).
Here's a fiddle - with what I have so far, only the last radio selects the checkboxes:
Here's the html:
<div class="panel-body rosette-body">
<div class="item">
<div class="the-options checkbox-wrapper">
<div class="set checker">
<input id="green-abalone-ring" name="rosette_option" type="radio" value="Green Abalone Ring">
<label for="green-abalone-ring">Green Abalone Ring</label>
</div>
<div class="set checker">
<input id="bloodwood-ring" name="rosette_option" type="radio" value="Bloodwood Ring">
<label for="bloodwood-ring">Bloodwood Ring</label>
</div>
<div class="set checker">
<input id="koa-wood-ring" name="rosette_option" type="radio" value="Koa Wood Ring">
<label for="koa-wood-ring">Koa Wood Ring</label>
</div>
<div class="hidden-set">
<input name="rosette_title" type="checkbox" value="Simple Rosette example">
<input name="rosette_img" type="checkbox" value="/images/uploads/main/simple-rosette.jpg">
</div>
</div>
</div><!-- [END] item -->
</div>
The jQuery I've tried to use:
$(document).on('change', '.rosette-body .checker input[type="radio"]', function() {
$(this)
.parents('.panel-body.rosette-body')
.find('.checker')
.each(function() {
//var checkboxes = $(this).siblings('input[type="checkbox"]'),
var checkboxes = $(this).siblings('.hidden-set').find('input[type="checkbox"]'),
radio = $('input[type="radio"]', this).get(0);
checkboxes.prop('checked', radio.checked);
});
});
Aucun commentaire:
Enregistrer un commentaire