Question

我不想在这个问题上打败一匹老马，但是当选中一个复选框时，我没有任何运气让两个HTML Input元素显示出来。我在此处浏览过与该问题相关的多个页面，最后一页是How To Show And Hide Input Fields Based On Radio Button Selection。这是代码

function f1() {
    var mycheck = document.getElementById("isevent").checked;
    var myevent = document.getElementById("eventname");
    var mycampaign = document.getElementById("campaign");

    if (mycheck === true) {

        myevent.style.display = 'normal';
        mycampaign.style.display = 'normal';
        alert("Myevent's visibility is " + myevent.style.display);

    } else {
        myevent.style.display = 'none';
        mycampaign.style.display = 'none';

    }
}

我从警报中看到该复选框正在调用该函数，但显示值未更改。这是小提琴页http://jsfiddle.net/352hjrwo/12/

我想念什么？

Answer 1

将normal更改为block;）

function f1() {
            var mycheck = document.getElementById("isevent").checked;
            var myevent = document.getElementById("eventname");
            var mycampaign = document.getElementById("campaign");
            
            if (mycheck === true) {
              
                    myevent.style.display = 'block';
                    mycampaign.style.display = 'block';
                alert("Myevent's visibility is " + myevent.style.display);

            } else {
                    myevent.style.display = 'none';
                    mycampaign.style.display = 'none';

            }
}

<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onclick="javascript:f1()" />&nbsp;Staffed Event?
</div>
<div>
<input type="text" id="eventname" class="rcorners input" runat="server" placeholder="Event Name" style="display:none;" maxlength="128" />
</div>
<div>
<input type="text" id="campaign" runat="server" class="rcorners input" placeholder="Campaign" maxlength="64" style="display:none;" />
</div>

Answer 2

如果使用display = block，就可以了。

HTML

<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onchange="javascript:f1(this)" />&nbsp;Staffed Event?
</div>
<div>
<input type="text" id="eventname" class="rcorners input" runat="server" placeholder="Event Name" style="display:none;" maxlength="128" />
</div>
<div>
<input type="text" id="campaign" runat="server" class="rcorners input" placeholder="Campaign" maxlength="64" style="display:none;" />
</div>

JavaScript

    function f1(element) {
        var myevent = document.getElementById("eventname");
        var mycampaign = document.getElementById("campaign");

        if (element.checked) {

                myevent.style.display = 'block';
                mycampaign.style.display = 'block';
                    alert("Myevent's visibility is " + myevent.style.display);

        } else {
                myevent.style.display = 'none';
                mycampaign.style.display = 'none';

        }

}

Answer 3

只需将正常替换为块。显示属性没有正常值。

http://jsfiddle.net/352hjrwo/19/

COUNTIF

HTML输入显示不会随着javascript改变

3 个答案: