兄弟（非表示）チェックボックスを選択するには、どのグループでラジオオプションを取得できますか？

Question

I asked a similar question yesterdayですが、いくつかのラジオオプションがあります（いくつでも可能です）。のいずれかが兄弟チェックボックス（非表示になります）を選択する必要があります。

EDIT（詳細）：また：<div class="panel-body">

にはいくつかの<div class="item">があることができここでフィドルだ - 私ははこれまでのところ、唯一の最後のラジオは、チェックボックスを選択しなければならないもので：

https://jsfiddle.net/ByteMyPixel/cqdj4jt6/1/
UPDATED FIDDLE ：ここhttps://jsfiddle.net/ByteMyPixel/cqdj4jt6/3/

は、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> 

jQueryの私が使用することを試みた：

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

Answer 1

私はあなたがすべてのラジオボタンを反復気にしないことをお勧め、必要は本当にありません。現在選択されているラジオボタンの値は、隠しチェックボックスをどのように処理するかを判断するために必要なものです。その場合、次のコードはそれを正確に行います。最後の行は、私のRadioToCheckboxWidgetを実際にインスタンス化して、与えられた要素を適切なリスナーでラップする行です。ユーザーがラジオボタンを選択すると、選択されたラジオボタンの値が表示されます（私の例では値または ""）。その値に基づいて、チェックボックスを繰り返し実行し、実際の値をONに設定します。

これをフィドルとして見るには、here you go。あなたの要求ごとに

/***** 
 
* RadioToCheckboxWidget(jQueryDOMNode) 
 
* The RadioToCheckboxWidget takes a collection of radio button els 
 
* and a collection of checkbox els, then toggles the checkbox based 
 
* on the status of the radio buttons. if the radio with NO value is 
 
* selected, the checkboxes are unchecked. If any other radio button 
 
* is selected, then the checkboxes are checked. 
 
* 
 
*****/ 
 
var RadioToCheckboxWidget = function(element) { 
 
    this.el = element; 
 
    this.__init(); 
 
}; 
 

 
$.extend(RadioToCheckboxWidget.prototype, { 
 
    __init: function() { 
 
    /*** 
 
    * This function was just edited, to allow the user to pass 
 
    * a collection of nodes. Thus, the user can either apply it 
 
    * one-by-one like this: 
 
    *  var myRadio = new RadioToCheckboxWidget($("#myID")); 
 
    * ... or it can be applied to a collection of nodes like: 
 
    *  var myRadios = new RadioToCheckboxWidget($(".item")); 
 
    * 
 
    * The second scenario above is how I've applied it, but by doing 
 
    * the rewrite, there is flexibility. 
 
    * 
 
    ***/ 
 
     
 
    // iterate over every node in the jQuery collection, and 
 
    // set up each one as its own widget with its own listeners. 
 
    // by doing this, selections in one have no affect on others. 
 
     this.el.each(function() { 
 
     // convenience -- create a reference to the current el. 
 
     var el = $(this); 
 
     // references to the radio and checkbox els. 
 
     var radioBtnEls = el.find(".checker"); 
 
     var checkboxEls = el.find(".hidden-set input[type=checkbox]"); 
 
     
 
     // listen for changes to ANY of the radio buttons 
 
     el.on("change", radioBtnEls, function() { 
 
      // if the radio has a value (so it's not 'None'), 
 
      // we check the boxes. Otherwise, we UNcheck them. 
 
      var toggleVal = $(this).find("input[type=radio]:checked").val(); 
 
      checkboxEls.each(function() { 
 
       if (toggleVal == "") { 
 
        $(this).prop("checked", false); 
 
       } else { 
 
        $(this).prop("checked", true); 
 
       } // end if toggleVal 
 
       }) // end checkboxEls.each() 
 
      }) // end on change 
 
     }); 
 
    } // end init() 
 

 
}); 
 

 

 
// This is the line that actually uses all the above code -- this 
 
// one line creates as many widgets as I have .item nodes. 
 
var myRadioPanes = new RadioToCheckboxWidget($(".item"));

.item { 
 
    border: 1px dotted #ccc; 
 
    display: inline-box; 
 
    float: left; 
 
    padding: 10px; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body rosette-body"> 
 

 
    <fieldset class="item"> 
 
    <legend> 
 
    Wooden ring: 
 
    </legend> 
 
    <div class="the-options checkbox-wrapper"> 
 

 
     <div class="set checker"> 
 
     
 
     <label><input name="rosette_option" type="radio" checked value=""> None</label> 
 
     </div> 
 
     <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> 
 
    </fieldset> 
 
    <!-- [END] item --> 
 

 
    <fieldset class="item"> 
 
    <legend> 
 
    Gold chain necklace: 
 
    </legend> 
 
    <div class="the-options checkbox-wrapper"> 
 

 
     <div class="set checker"> 
 
     
 
     <label><input name="chain_option" type="radio" checked value=""> None</label> 
 
     </div> 
 
     <div class="set checker"> 
 
     <input id="three-strand-braid" name="chain_option" type="radio" value="Three-strand braid"> 
 
     <label for="three-strand-braid">Three-strand braid</label> 
 
     </div> 
 

 
     <div class="set checker"> 
 
     <input id="five-strand-braid" name="chain_option" type="radio" value="Five-strand gold braid"> 
 
     <label for="five-strand-braid">Five-strand braid</label> 
 
     </div> 
 

 
     <div class="set checker"> 
 
     <input id="seven-strand-braid" name="chain_option" type="radio" value="Seven-strand braid"> 
 
     <label for="seven-strand-braid">Seven-strand braid</label> 
 
     </div> 
 

 
     <div class="hidden-set"> 
 
     <input name="chain_title" type="checkbox" value="Simple Chain example"> 
 
     <input name="chain_img" type="checkbox" value="/images/uploads/main/simple-chain.jpg"> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
    <!-- [END] item --> 
 

 
</div>

、あなたは複数の.itemのためにこれを使用する方法を知りたいと思いました。 1つの方法は、おそらくそれぞれの.itemへのハードリファレンスを持つことです。しかし、それは本当にスケーラブルなソリューションではありません。代わりに、ウィジェットの__init（）関数を書き換えて、jQueryノードのコレクションを渡すことができ、それぞれを独立したウィジェットとして設定します。今度は、特定のノードへの参照の束（例えば、new RadioToCheckBox($('#aSingleDOMNode'));）を必要な数だけ作成するか、ウィジェットへの単一の参照を作成してコレクション全体に渡すことができます（var myCollectionOfItems = new RadioToCheckbox($(".items"));など）。