代码之家 › 专栏 › 技术社区 › user356808

id.style.display不工作

vb.net css javascript

user356808 · 技术社区 · 16 年前

不知道为什么这不起作用。没有js错误,但它只是没有将display属性设置为“block”。如果删除最内部的If语句,则当从组中选择最后一个单选按钮时,div控件的display属性将更改。

<asp:RadioButtonList ID="rblMarital" RepeatDirection="Horizontal" runat="server">
    <asp:ListItem Value="S" Selected="True">Single</asp:ListItem>
    <asp:ListItem Value="M">Married</asp:ListItem>
    <asp:ListItem Value="D">Separated/Divorced</asp:ListItem>
</asp:RadioButtonList>

代码隐藏

If controlId = "rblMarital" Then
    str = "M"
End If

rbl = wizard.FindControl(controlId)
div = wizard.FindControl(temp)
rbl.Attributes.Add("onClick", "showHide('" & rbl.UniqueID & "','" & div.ClientID & "','" & str & "')")

javascript

function showHide(rbl, div, str) {

    var rblID = document.getElementsByName(rbl);
    var divID = document.getElementById(div);

    for (var j = 0; j < rblID.length; j++) {
        if (rblID[j].checked) {
            if (rblID[j].value == str) {
                divID.style.display = "block";
            }
        }
    else
        divID.style.display = "none";
    }
}

渲染输出

<td>Marital Status:</td>
<td>
    <table class="noPad formRadioButton">
        <tr>
            <td>
                <table id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital" onClick="showHide('_ctl0:ContentPlaceHolder1:wizard1:rblMarital','_ctl0_ContentPlaceHolder1_wizard1_divMarital','M')" border="0">
                <tr>
            <td><input id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_0" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblMarital" value="S" checked="checked" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_0">Single</label></td>
                        <td><input id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_1" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblMarital" value="M" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_1">Married</label></td>
                        <td><input id="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_2" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblMarital" value="D" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblMarital_2">Separated/Divorced</label></td>
        </tr>
        </table>
            </td>
        </tr>
    </table>
</td>
</tr>
<tr>
    <td colspan="2">
        <div id="_ctl0_ContentPlaceHolder1_wizard1_divMarital" style="display:none;">
            <table class="noPad">
                <tr>
                    <td class="back660000">If your spouse is a student</td>
                    <td align="center" style="width:250px;">School <input name="_ctl0:ContentPlaceHolder1:wizard1:txtSpouseSchool" type="text" id="_ctl0_ContentPlaceHolder1_wizard1_txtSpouseSchool" style="width:180px;" /></td>
                    <td style="width:180px">Graduation year <input name="_ctl0:ContentPlaceHolder1:wizard1:txtSpouseGrad" type="text" maxlength="4" id="_ctl0_ContentPlaceHolder1_wizard1_txtSpouseGrad" style="width:30px;" /></td>
                </tr>
                <tr>
                    <td class="back660000">Is your spouse employed</td>
                    <td colspan="2">
                        <table class="formRadioButton">
                            <tr>
                                <td>
                                    <span id="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed"><input id="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_0" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblSpouseEmployed" value="No" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_0">No</label><input id="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_1" type="radio" name="_ctl0:ContentPlaceHolder1:wizard1:rblSpouseEmployed" value="Yes" checked="checked" /><label for="_ctl0_ContentPlaceHolder1_wizard1_rblSpouseEmployed_1">Yes</label></span>
                                </td>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;Annual income <input name="_ctl0:ContentPlaceHolder1:wizard1:txtSpouseIncome" type="text" id="_ctl0_ContentPlaceHolder1_wizard1_txtSpouseIncome" style="width:100px;" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

4 回复 | 直到 16 年前

Martin 16 年前

您的rbl上没有name属性(或者.Net为您设置了一个属性):

function showHide(rbl, div, str) {

    var rblID = document.getElementById(rbl);
    var divID = document.getElementById(div);

    if (rblID.value == str) {
        divID.style.display = "block";
    }
    else {
        divID.style.display = "none";
    }

}

Mike Rifgin 16 年前

您确定要设置单选按钮组的名称属性吗?我看不出有什么问题。检查第一个if语句中str和rblID[j]的值

lincolnk 16 年前

所以看起来你想让div在选择“已婚”选项时可见,而在选择其他选项时隐藏。按照你写的方式,“separated”选项始终是最后一个选中的项。当你选择“已婚”时,div立即设置 display:block 然后回到 display:none

一个快速的解决方法是在默认情况下隐藏div,然后在选择的项目是“已婚”时显示它。

function showHide(rbl, div, str) {

    var rblID = document.getElementsByName(rbl);
    var divID = document.getElementById(div);

    divID.style.display = "none";

    for (var j = 0; j < rblID.length; j++) {
        if (rblID[j].checked && rblID[j].value === str) {
            divID.style.display = "block";
        }
    }
}

user356808 user356808 16 年前

结果,当我更仔细地查看代码时,else语句出现在错误的位置。

function showHide(rbl, div, str) {

        var rblID = document.getElementsByName(rbl);
        var divID = document.getElementById(div);

        for (var j = 0; j < rblID.length; j++) {
            if (rblID[j].checked) {
                if (rblID[j].value == str) {
                    divID.style.display = "block";
                }
                else
                    divID.style.display = "none";
            }
        }
    }