mardi 2 août 2016

How to find closest checkbox if the two checkbox are in different hierarchy

I have two checkbox in different hierarchy.I want to display a text when either one of the checkbox is checked. Hide text when both are unchecked. Both check box have an onClick function where i am passing "this". How can i find whether second checkbox is checked or not on click of first checkbox. Note : Id is created dynamically so cannot use that. Below i have mentioned the depth of checkbox (firstCheckbox and SecondCheckbox). What should i write in showMsg(this,Var1) javascript method so that the expectation is met i.e on click of one of the checkbox, another/closest checkbox is retrieved and its value(checked/unchecked) is available.

<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 method :

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
    }       
}}




Aucun commentaire:

Enregistrer un commentaire