Php 仅当我选中复选框时，才应显示相应的表单

我正试图实现这个确切的功能：但在使用我的PHP时，现在它显示了两个复选框和两个表单，但我需要的是：除非我选中任何复选框，否则这两个表单不应该可见

所以，请检查下面代码中的错误

function eshop_extras_checkout($echo){


    $echo .= '

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

    <script>

    $(".formGroup").hide();
    $("#chooseForm input:checkbox").on("change", function() {
        if($(this).is(":checked")) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }
    });
    ​
</script>';

    $echo .= '<fieldset class="eshop eshop_extra">' . "\n";


    $echo .= ' <form id="chooseForm">
        <input type="checkbox" name="form1" value="form1"> Form1<br>
        <input type="checkbox" name="form1" value="form2"> Form2<br>
    </form>

    <form id="form1" class="formGroup">
        <h2>FORM 1</h2>
        <label>Name</label><input type="text"> <br>
        <label>Address</label><input type="text">
    </form>

    <form id="form2" class="formGroup">
        <h2>FORM 2</h2>
        <label>Username</label><input type="text"> <br>
    </form>';


    $echo .= '<legend>Articles Order Form</legend>' . "\n";



    return $echo;
}

函数eshop_extras_checkout（$echo）{
$echo.='
$（“.formGroup”）.hide（）；
$（“#选择表单输入：复选框”）。打开（“更改”，函数（）{
如果（$（this）.is（“：checked”））{
$（“#”+$（this.val（））.show（）；
}
否则{
$（“#”+$（this.val（））.hide（）；
}
});
​
';
$echo.=''。\n“；
$echo.='
表格1

表格2

表格一
名称

地址
表格二
用户名

';
$echo.='物品订购单'。“\n”；
返回$echo；
}

---

等待您的回复…

问题是您的脚本在元素出现在DOM中之前执行。见：

//when this line executes:
$(".formGroup").hide(); //the .formGroup is not present in the DOM yet
//in other words, the jQuery object is empty and calling .hide() does nothing

//the same happens to this handler binding:
$("#chooseForm input:checkbox").on("change", ...

您的fiddle的JS被设置为使用

onDomReady

包装器，这就是它在那里正常工作的原因

您可以将脚本放在表单的HTML下面，和/或简单地将脚本内容包装在：

---

jQuery的最佳实践之一是始终将代码包装在

$(document).ready(function() {
    //code here
});

或者更简短的速记：

$(function() {
    //code here
});

两者都有相同的效果，它们阻止代码执行，直到DOM准备就绪

另一个JavaScript最佳实践是将JS代码放在页面的页脚中（就在

之前），这样脚本加载不会阻止页面呈现，当DOM解析器到达脚本时，您的DOM就已经准备好了

以上两种最佳实践都是可组合的。尽管如此，只需使用DOM就绪处理程序就可以解决这个问题，将脚本移动到表单HTML下面也就足够了

---

您的框架已经在

noConflict

模式下加载了另一个jQuery副本，这意味着您不能在全局范围内使用

$

别名。为了解决这个问题，您可以使用这个特殊的DOM就绪语法，它将jQuery别名回其范围内的

$

：

jQuery(function($) {
    $(".formGroup").hide();
    $("#chooseForm input:checkbox").on("change", function() {
        if($(this).is(":checked")) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }
    });
});

有关这方面的更多信息，请参阅DOM就绪处理程序文档-为jQuery命名空间别名：

当使用另一个JavaScript库时，我们可能希望调用

$.noConflict（）

以避免命名空间问题。当此函数 调用时，

$

快捷方式不再可用，迫使我们编写

jQuery

每次我们通常都会编写

$

。但是，处理程序 传递给

.ready（）

方法可以接受一个已传递的参数 全局

jQuery

对象。这意味着我们可以在中重命名对象 我们的

.ready（）

处理程序的上下文不会影响其他代码

---

您好，正如您所说，我包装了DOM并尝试了，但表单1和表单2仍然显示。。。但我希望它们仅在我选中或取消选中复选框时显示…检查控制台是否有错误。它必须工作，如果不是因为你在某个地方有无效的语法或者某个地方有冲突。下面是一个例子，其中所有代码都来自你的问题的PHP（添加了DOM就绪处理程序），效果很好。嗨，我在我的PHP文件中准确地使用了你的代码。。请检查这个；ink:your-guru.com/articless/，首先添加到购物车，然后前往收银台，您将找到“物品订单”，就在下面您将找到2张表单。。如果我打扰了你，我真的很抱歉，但是我真的没有得到，而且我是这个编码的新手…@Harris如果你在控制台中查看：

TypeError:$不是一个函数

，那是因为你的框架已经在将jQuery的另一个副本加载到noConflict模式。给我一分钟，我来更新一下。

jQuery(function($) {
    $(".formGroup").hide();
    $("#chooseForm input:checkbox").on("change", function() {
        if($(this).is(":checked")) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }
    });
});