在 JavaScript 中使用 IF 处理复选框状态
Posted
技术标签:
【中文标题】在 JavaScript 中使用 IF 处理复选框状态【英文标题】：Handling checkbox status using IF in JavaScript 【发布时间】：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>
【问题讨论】：
【参考方案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";
);
【讨论】：
以上是关于在 JavaScript 中使用 IF 处理复选框状态的主要内容，如果未能解决你的问题，请参考以下文章
在 JavaScript 中使用媒体查询或在 CSS 中使用 if/else 语句
在javascript单击处理程序中隐藏和单选按钮和复选框标签
如何在 Web 表单中使用 javascript 隐藏复选框和复选框文本