jeudi 7 décembre 2017

How can I get either radio option in a group, to select sibling (hidden) checkboxes?

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:

http://ift.tt/2iAIemF

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