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

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
     }
}()):