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

【问题标题】：Handling checkbox status using IF in JavaScript在 JavaScript 中使用 IF 处理复选框状态
【发布时间】：2019-05-26 21:45:49
【问题描述】：

我正在学习 PHP 并尝试根据复选框检查和取消检查打印一条消息。但是当我尝试检查复选框时，我只得到其他部分。这是 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>

【问题讨论】：

标签： javascript php

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

【讨论】：

【解决方案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";
  });

【讨论】：