javascript - 请解决这个 jQuery 问题

Question

我是 jQuery 和 PHP 的新手。我自己试过，但不明白如何低于输出。请问有人会调查这个吗？

我正在努力实现这一目标： http://jsfiddle.net/exttq/

我的意思是：Form1 和 Form2 仅在之前显示，但我只在选中或取消选中这些框后才打开或关闭它们

这个 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;
}

Answer 1

我观察到的第一件事是你的脚本在你的 DOM 中的 HTML 之前。我建议你把它放在 DOM Ready Handler 中，然后再试一次。

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