Javascript: "if"表单获取值为 "on"

Question

我无法使该脚本正常运行。

我正在尝试使表单输入的值显示或隐藏操作页面上的不同部分。

例如，下面的 html 代码显示所有标题文本一开始都是隐藏的，但 javascript 函数应根据表单的 GET 值取消隐藏该部分。

因此，要显示“自定义”部分，链接将为 http://domain.tld/action.php?custom=on

以下是需要根据表单值显示/隐藏的部分。

<div id="customsection" onload="javascript:customCheck();" style="display:none" class="custom">
    <h1>Custom Text</h1>
</div>

<div id="whitesection" onload="javascript:whiteCheck();"  style="display:none" class="white">
    <h1>White Text</h1>
</div>

<div id="colorsection" onload="javascript:colorCheck();"  style="display:none" class="color">
    <h1>Colored Text</h1>
</div>

这是我的脚本函数:

function customCheck() {
    if ($_GET['custom'] == 'on') {
        document.getElementById('customsection').style.display = 'block';
    }
    else document.getElementById('customsection').style.display = 'none';

}
function colorCheck() {
    if ($_GET['color'] == 'on') {
        document.getElementById('colorsection').style.display = 'block';
    }
    else document.getElementById('colorsection').style.display = 'none';

}
function whiteCheck() {
    if ($_GET['white'] == 'on') {
        document.getElementById('whitesection').style.display = 'block';
    }
    else document.getElementById('whitesection').style.display = 'none';

}

脚本有什么问题/我该如何解决这个问题？

提前致谢!

Answer 1

** 将其放入页面的 head 标签中，以便在加载 html 后它将运行 **

您可能想查看 isset() PHP 函数，以便检查 $_GET 是否已设置

<script>
    $(document).ready(function(){

        // --------------------------------------------------------
        // Just for convienience, set the gets as javascript variables 
        // so the bottom functions are cleaner
        // --------------------------------------------------------

        var custom = "<?php echo $_GET['custom']; ?>";
        var color = "<?php echo $_GET['color']; ?>";
        var white = "<?php echo $_GET['white']; ?>";

        // --------------------------------------------------------
        // On document load run these 3 functions
        // --------------------------------------------------------

        customCheck();
        colorCheck();
        whiteCheck();

        // --------------------------------------------------------
        // Create functions
        // --------------------------------------------------------
        function customCheck() {
            if (custom == 'on') {

                document.getElementById('customsection').style.display = 'block';
            }   else {
                document.getElementById('customsection').style.display = 'none';
            }
        }

        function colorCheck() {
            if (color == 'on') {
            document.getElementById('colorsection').style.display = 'block';
            } else {
                document.getElementById('colorsection').style.display = 'none';
            }
        }

        function whiteCheck() {
            if (white == 'on') {
                document.getElementById('whitesection').style.display = 'block';
            } else {
                document.getElementById('whitesection').style.display = 'none';
            }
        }

        // --------------------------------------------------------

    });
</script>

它会出现在您的 HTML 位于您体内的任何位置。

<div id="customsection" style="display:none" class="custom">
    <h1>Custom Text</h1>
</div>

<div id="whitesection" style="display:none" class="white">
    <h1>White Text</h1>
</div>

<div id="colorsection" style="display:none" class="color">
    <h1>Colored Text</h1>
</div>