Javascript：“if”表单获取值为“on”答案

【问题标题】：Javascript: "if" form get value is "on"Javascript：“if”表单获取值为“on”
【发布时间】：2017-03-30 03:27:32
【问题描述】：

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

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

例如，下面的 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';

}

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

提前致谢！

【问题讨论】：

你会考虑 jquery 吗？我将在下面写一个答案，因为看起来您正在将 php 和 javascirpt 混合在一起。
@Icewine 我没有使用 jquery 的经验，但如果它适用于这种情况，那么我肯定会使用它。我很确定我的语法不正确，但我认为这是对先前问题的解决方案，所以我尝试了。

标签： javascript forms if-statement get display

【解决方案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>

【讨论】：