Question

我正在尝试隐藏字段集元素在页面加载时已经选中单选按钮'否'，当选中'是'时，字段集应该出现。目前，如果用户检查“否”并且/或显示用户是否选中“是”，则隐藏字段集。但我希望在页面加载时隐藏字段集，或者如果已经选中“否”，则选中“是”后应显示字段集及其内容。

hide_show_field.js

function ToggleDisplay(Section, boolHide) {
    if (boolHide) {
        Section.style.display = "none";
    }
    else {
        Section.style.display = "block";
    }
}

function disableElement(element, boolHide)
{
    var input = document.getElementById(element).getElementsByTagName("input");
        for(var i = 0; i < input.length; i++)
        {
            input[i].removeAttribute("disabled");
        }
}

function hideShowElement(CurrentSection, OtherSection, DisableSection)
{
    var sectionVal = CurrentSection.value;
        if (sectionVal == 'No') {
            ToggleDisplay(OtherSection, true);
            disableElement(DisableSection, "true");
        }
        else {
            ToggleDisplay(OtherSection, false);
            disableElement(DisableSection, "false");
        }
}

form.php的

<p class="text">
            <label for="Transferred">Transferred</label>
            <input type="radio" name="transferred" value="Yes" onchange="hideShowElement(this, mydiv, 'optionGroup');">Yes
            <input type="radio" name="transferred" value="No" onchange="hideShowElement(this, mydiv, 'optionGroup');">No
        </p>
        </div>
    </fieldset>

<fieldset class="group" id="optionGroup">
    <legend>Transfer</legend>
    <div id="mydiv">
    <div class="col">
        <p class="text">
            <label for="Transferred To">Transferred To</label>
            <select name="transferTo">
                <option value="Select Station"></option>
                <?php include('php/selectlocation.php'); ?>
            </select>
        </p>
        <p class="text">
            <label for="Date Transferred">Date Transferred</label>
            <input type="date" name="dateTransferredTo" id="datepicker1" placeholder="YYYY-MM-DD" >
        </p>         
    </div>
    <div class="col">
        <p class="text">
            <label for="Transferred From">Transferred From</label>
            <select name="transferFrom" >
                <option value="0"></option>
                <?php include('php/selectlocation.php'); ?>
            </select>
        </p>
        <p class="text">
            <label for="Date Transferred">Date Transferred</label>
            <input type="date" name="dateTransferredFrom" id="datepicker2" placeholder="YYYY-MM-DD" >
        </p>
        <p class="text">
            <label for="Rank Transferred With">Rank Transferred With</label>
            <select name="rankTransferredWith">
                <option value="0"></option>
                <?php include('php/selectranks.php'); ?>
            </select>
        </p>
    </div>
    </div>
</fieldset>

请有人提供一些帮助

Answer 1

也许最简单的方法是在php中设置“no”checked =“true”的输入... 但是你激活你的js的方式可能不会起作用。最好在js代码中选择这些元素并检查它们是否被选中。您可能需要使用匿名函数，以确保一切正常...

(function () {
     if (radio.checked) {
        //hide or show
     }
}()):

在页面加载或已选择单选按钮选项时隐藏字段集元素

1 个答案: