Question

我在不同的层次结构中有两个复选框。我想在选中其中一个复选框时显示文本。两者都未选中时隐藏文本。两个复选框都有一个onClick函数，我正在传递＆＃34;这个＆＃34;。如何在点击第一个复选框时查找是否选中了第二个复选框。

注意：Id是动态创建的，因此无法使用它。下面我提到了复选框的深度（firstCheckbox和SecondCheckbox）。我应该在showMsg（this，Var1）javascript方法中写什么，以便满足期望，即点击其中一个复选框，检索另一个/最近的复选框，并且其值（选中/未选中）可用。

<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

好的，我提出了一个有效的解决方案@marcospereira

可悲的是，我已经痛苦地清理了你的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();
        }
    });
});

如果两个复选框位于不同的层次结构

1 个答案: