Question

我在复选框的onchange事件上调用一个函数，它运行良好，但是当我在函数体中插入ajax代码时，未定义的错误函数出现了。请到目前为止查看我的代码：

input type="checkbox" onclick="OnChangeCheckbox (1)" id="myCheckbox1" value="22" />
    <label for="myCheckbox">Sample check box</label>

和javascript函数是：

function OnChangeCheckbox (checkbox) {
    var k = checkbox;
    if ($("#myCheckbox"+k.value).is(":checked")) {  
        $.ajax({
            async: false,
            url: 'getCDP.php', 
            data: { "size": vsize1},
            dataType: 'json',  
            success: function(data) {
                alert("ssdsd");
            }
        });
    }
    else {
        alert ("The check box is not checked.");
    }
}

Answer 1

k.value 等于 checkbox.value ; 但复选框的值为1，所以 k.value 是未定义;

你可以使用：

if ($("#myCheckbox"+k).is(":checked")) {

Answer 2

正如我在评论中所说，不要使用内联事件处理程序，因为它们已成为过去和is a bad practice。由于您使用的是jQuery，因此尽可能多地使用它。除非你真的需要这样做，否则不要将普通JS与jQuery混合使用。所以，回到你的问题;您的代码可能会重写为以下内容。

行"size": typeof vsize1 !== "undefined" && vsize1 || 0用于确保变量已定义且具有值，或者如果不是则将其设置为0作为后备。

来自doc：请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。从jQuery 1.8开始，不推荐使用async：false和jqXHR（$ .Deferred）;您必须使用success / error / complete回调选项而不是jqXHR对象的相应方法，例如jqXHR.done（）或不推荐使用的jqXHR.success（）。

根据上面的引用，我评论了async: false，因为它不应该被使用，除非确实需要这样做。如果需要使用async: false，则必须使用success（如问题中所示）代替.done！

$(function() {
    //change event is more appropriate than click for form elements.
    $(".mycheck").on("change", function() {
        var $elem = $(this); // event target (one of the che
        var dataID = $elem.data("id"); // 1, 2 0r 3
        // Please note that the below line would only trigger the ajax call for the first checkbox as the data-id is being checked and when the box is checked.
        if ($elem.is(":checked") && dataID == 1) {
            $.ajax({
                //async: false,
                url: 'getCDP.php', 
                data: {
                    "size": typeof vsize1 !== "undefined" && vsize1 || 0
                },
                dataType: 'json'
            }).done(function(data) {
                alert("ssdsd");
            }).fail(function() {
                alert ("fail");
            });
        } else {
           alert ("The check box is not checked."); 
        }
    });
});

以上只适用于一个复选框，也适用于多个复选框。上述代码的相关HTML如下所示：

<input type="checkbox" id="myCheckbox1" value="22" class="mycheck" data-id="1" />
<input type="checkbox" id="myCheckbox2" value="23" class="mycheck" data-id="2" />
<input type="checkbox" id="myCheckbox3" value="24" class="mycheck" data-id="3" />

Answer 3

您的提醒错误。你打开它用＆＃39; {＆＃39;而不是＆＃39;（＆＃39;。

在这里工作得很好：jsfiddle.net/adamjld/8wf6f9m8

Answer 4

您的代码中几乎没有拼写错误。在您发布问题之前请仔细阅读..

在;

vsize1

alert{"ssdsd");

Answer 5

这是因为你没有定义

'vsize1'

您将作为数据传递。尝试定义它或在这里给出一个静态值。

Answer 6

请检查此fiddle（ajax工作）。

您可以像这样定义您的复选框：

<div class="top-box">
        <?php
        $sql = "SELECT * FROM _products WHERE category = '$cat'";
$result = dbConnect()->query($sql);
// If the SQL query is succesfully performed ($result not false)
if($result !== false) {
$cols = $result->columnCount();           // Number of returned columns
// Generate ADS Feed for each ROW
foreach($result as $row) {
                echo '<div class="col_1_of_3 span_1_of_3">
             <a href="product.php?i=' . $row['model'] . '">
                <div class="inner_content clearfix">
                <div class="product_image">
                    <img src="images/' . $row['model'] . '.jpg" alt=""/>
                </div>
                <div class="price">
                   <div class="cart-left">
                        <p class="title">' . $row['name'] . '</p>
                    </div>
                    <div class="clear"></div>
                 </div>             
               </div>
               </a>
            </div>';
            }
        } else {
            echo "<p>No products available at this moment, contact us for more information!</p>";
        }

        ?>

            <div class="clear"></div>
        </div>

将复选框（使用<input type="checkbox" onchange="OnChangeCheckbox (this,1)" id="myCheckbox1" value="22" /> <label for="myCheckbox">Sample check box</label>）作为参数发送到函数

在调用函数时定义this变量或将其作为参数发送（如果它取决于选中的复选框）

在函数体内使用ajax时，Javascript函数未定义错误

6 个答案: