2つのチェックボックスが異なる階層にある場合、最も近いチェックボックスを見つける方法

Question

私は異なる階層に2つのチェックボックスを持っています。いずれかのチェックボックスがオンになっているときにテキストを表示したい。両方がチェックされていない場合は、テキストを非表示にします。両方のチェックボックスは、私が "this"を渡しているonClick関数を持っています。最初のチェックボックスをクリックすると、2番目のチェックボックスがオンになっているかどうかを確認する方法を教えてください。

注：Idは動的に作成されるため、使用できません。以下では、チェックボックス（firstCheckboxとSecondCheckbox）の深さについて述べました。 showMsg（this、Var1）javascriptメソッドで、期待値が満たされるように、つまりチェックボックスの1つをクリックすると、別の/最も近いチェックボックスが取得され、その値（チェックされている/されていない）が利用可能になります。

<f:subview id="firstsubview"> 
    <f:subview id="secondSubview"> 
     <f:verbatim> 
      <div id="first" class="firstClass"> 
     </f:verbatim> 
     <h:selectBooleanCheckbox id="dynamic1" onclick="showMsg(this,'firstcheckbox')" ;/> 
     <f:verbatim> 
      </div> 
     </f:verbatim> 
     <h:outputText value="XYZ" id="abc" /> 
     <f:verbatim> 
      <div id="anotherdiv1" class="anotherdiv1" /></div> 
      <div id="anotherdiv2" class="anotherdiv2" /></div> 
     </f:verbatim> 
    </f:subview> 
</f:subview> 

<f:subview id="thirdsubview"> 
    <f:subview id="fourthSubview"> 
     <f:verbatim> 
      <div id="second" class="secondclass"> 
     </f:verbatim> 
     <h:selectBooleanCheckbox id="dynamic2" onclick="showMsg(this,'secondcheckbox')" ; /> 
     <f:verbatim> 
      </div> 
     </f:verbatim> 
     <h:outputText value="def" id="ghi" /> 
     <f:verbatim> 
      <div id="anotherdiv3" class="anotherdiv3" /></div> 
      <div id="anotherdiv4" class="anotherdiv4" /></div> 
     </f:verbatim> 
    </f:subview> 
</f:subview> 

<div id="displayDiv"> This should be displayed if 
any one checkbox or both are check, hidden when both 
checkbox are unchecked</div> 

Javascriptの方法：ここで

function showMsg(checkbox, var1){ 
if(checkbox.checked){ 
    $(".displayDiv").show(); 
} else { 
    if(var1 == "firstCheckbox"){ 
     var nearestCheckbox = $(checkbox).siblings(); 
     if(nearestCheckbox .checked){ 
       $(".displayDiv").show(); 
     } else { $(".displayDiv").hide();} 
    //the above code is not working 
    } 
    if(var1 == "secondCheckbox"){ 
     //plz suggest what should i write as none is working 
    }  
}} 

は、ブラウザがHTML生成されます。

<span id="rfmhiddenouterid"><input name="rfmhidden" class="RFM910400060" value="false" <="" span="" type="hidden"> 
    <div id="first" class="firstClass"> 
    <input checked="checked" id="AGVUQ0C768TCA0IVC9FC5A2007:dynamic" name="AGVUQ0C768TCA0IVC9FC5A2007: dynamic" class="dynamic111557543" onclick="showMsg(this,'firstcheckbox')" type="checkbox"></div> 

    <span id="AGVUQ0C768TCA0IVC9FC5A2007:dynamic"> First CheckBox </span><br><br>    

    <div id="anotherdiv1" class="anotherdiv1" style="display: none;"> 
    </div> 

    <div id="anotherdiv2" class="anotherdiv2" style="display: none;"> 
    </div> 

<span id="rfmhiddenouterid2"><input name="rfmhidden" class="RFM910400060" value="false" <="" span="" type="hidden"> 
    <div id="second" class="secondClass"> 
    <input checked="checked" id="AGVUQ0C768TCA0IVC9FC5A2007:dynamic" name="viewns_7_AGVUQ0C768TCA0IVC9FC5A2007:dynamic" class="dynamic111557543" onclick="showMsg(this,'secondcheckbox')" type="checkbox"></div> 

    <span id="viewns_7_AGVUQ0C768TCA0IVC9FC5A2007: dynamic" ">Second Checkbox</span> 

    <div id="anotherdiv3" class="anotherdiv3" style="display: none;"> 
    </div> 

    <div id="anotherdiv4" class="anotherdiv4" style="display: none;"> 
    </div> 

    <div id="displayDiv"> This should be displayed if 
    any one checkbox or both are check, hidden when both 
    checkbox are unchecked</div> 

</span> 
</span> 

Answer 1

[OK]を、私はhttps://jsfiddle.net/a72t14j0/

残念ながら実用的なソリューションを思い付いた、私は痛いほどきれいにしていますあなたのHTMLはあなたのコードをデバッグできませんでしたが、ここで私が思いついたJavaScriptです：

$(document).ready(function() { 
    $(".dynamic111557543").on("click", function(){ 
     // by default, hide the text 
     $("#displayDiv").hide(); 
     var number_of_selected_checkboxes = $(".dynamic111557543:checked").length; 
     if(number_of_selected_checkboxes > 0){ 
      // if any checkbox is checked, show the text 
      $("#displayDiv").show(); 
     } 
    }); 
});