Question

我正在学习PHP并尝试根据复选框check和uncheck打印消息。但是当我尝试选中checkbox时，我只得到了其他部分。这是php代码。让我知道我在哪里出错了。

<html>
    <body>
    <script type="text/javascript">
    function on_callPhp()
    {
        if(this.checked) {
            document.write("<?php echo php_func_c();?>");
        }
        else
        {
            document.write("<?php echo php_func_uc();?>");
        }
    }
    </script>

    <input type="checkbox" name="hit_val" value="hit" onchange="on_callPhp()">

    <?php
    function php_func_c()
    {
        echo "CHECKED";
    }

    function php_func_uc()
    {
        echo "UNCHECKED";
    }
    ?>
    </body>
</html>

Answer 1

一些问题：

名称on_callPhp似乎表明您认为JavaScript将在该函数中调用PHP。但这不是事实。当PHP运行时，它同时执行php_func_c和php_func_uc以便生成您想要的字符串。 PHP完成运行后，将在浏览器中呈现页面。当用户选中该复选框时，便不再与PHP进行交互。
this未引用该复选框。您可以改为传递this作为函数参数。
不要使用document.write，当然也不要在事件处理程序中使用：在后一种情况下，它将完全清除页面内容。使用console.log进行调试。然后，当您准备就绪时，可以做一些更有用的事情，例如显示其他页面内容。

尽管我未更改名称on_callPhp，但这是更正的代码。使用其他名称：

function on_callPhp(chkbox) // <-- notice the parameter
{
    if(chkbox.checked) { // <-- check the argument, not `this`
        console.log("<?php echo php_func_c();?>");
    }
    else
    {
        console.log("<?php echo php_func_uc();?>");
    }
}

onchange属性可以将this传递给函数：

<input type="checkbox" name="hit_val" value="hit" onchange="on_callPhp(this)">

Answer 2

内联事件处理程序（onchange="..."）会引起类似的麻烦，document.write也是如此。而是使用JS来操作DOM：

  // HTML
 <input type="checkbox" id="hit" />
 <div id="output"></div>

  // JS
  const hit = document.querySelector("#hit");
  const output = document.querySelector("#output");

  hit.addEventListener("change", function() {
     output.textContent = hit.checked ? "Checked" : "Unchecked";
  });

在JavaScript中使用IF处理复选框状态

2 个答案: