javascript - 复选框被选中但不执行功能

Question

我目前正在使用 php 循环从数据库中生成面板。 每个面板上都有一个复选框。选中后，它会检查可折叠面板中其下方的所有复选框。

当面板中的复选框被面板标题中的复选框选中时，它意味着运行一个函数来更新我的数据库，表示该框已被选中。当您放下可折叠面板并手动选中该框时，该功能就会起作用。但是，当您从更高级别选中该框并选中其下方的所有框时，它不会运行我放入的 onchange 函数。

有人可以帮忙吗？

谢谢， 克里斯蒂安

PHP:

foreach ($results3 as $table3) {
        $output_string .= "<div class=\"panel-inner\">\n";
        $output_string .= "<div class=\"row\">\n";
        $output_string .= "<div class=\"col-sm12\">\n";
        $output_string .= "<div class=\"panel-body\">\n";
        $output_string .= "<h4 class=\"panel-title\">\n";
        $output_string .= "<a>$table3[Call_Flow]</a>\n";
        $output_string .= "<input class=\"mycheckbox\" type=\"checkbox\" value=\"$table3[Test_ID]\" onchange=\"adds(tccb$j)\" id=\"tccb$j\"/>\n";
        $output_string .= "</h4>\n";
            $output_string .= "</div>\n";
        $output_string .= "<div id=\"collapseflow$j\" class=\"panel-body collapse\">\n";

HTML:

<div id="check">

    </div>

    <script>
    function adds(id) {

    var value = $(id).val()

        jQuery.ajax({
            url: "selection_update.php",
            data: {"value": value},
            type: "POST",
            dataType: 'json',
                success:function(responce){
                $("#check").html(responce);
            }
        });
    }
    </script>

编辑:

这是我用来检查所有子复选框的代码。

$output_string .= "<script type=\"text/javascript\" language=\"javascript\">\n";
$output_string .= "function checkCheckboxes( id, pID ){\n";
$output_string .= "$('#'+pID).find(':checkbox').each(function(){\n";
$output_string .= "jQuery(this).prop('checked', $('#' + id).is(':checked'));\n";
$output_string .= "});\n";     
$output_string .= "}\n";
$output_string .= "</script>\n";

Answer 1

这是因为 onchange 仅对用户点击使用react，而不是简单的值更改。要解决此问题，您需要手动触发 onchange 函数。

因此，在您的 oarent 的 onchange 函数中，请确保选择相关的子项并对其调用 .onchange() 。

下面是一个示例，其中一个复选框更改另一个复选框，无需 .onchange() 调用:

https://jsfiddle.net/c1zwek1u/

这是:

https://jsfiddle.net/c1zwek1u/1/

请注意，当子项的值发生变化时，它应该提醒您。

对于多个子项，您只需迭代该组并分别对每个子项调用它，如下所示:

https://jsfiddle.net/c1zwek1u/3/

在 Jquery 中，您可以像这样触发更改 $(selector).trigger('change');