Question

我有以下HTML：

<input type='checkbox' onchange='checkvalue(this)' def='checked' value='checked' />

以及以下javascript：

$(document).ready(function(){
function checkvalue(){
if($(this).attr("value") != "checked"){
($(this).attr("value") = "checked");
}
else{
   ($(this).attr("value") = "unchecked");
}
}
});

基本上每当选中或取消选中复选框时，我想调用此javascript函数，该函数将查看是否选中或取消选中复选框的默认值，然后相应地更改值 - 如果复选框的默认值为checked并单击，该值应更改为未选中，反之亦然。但是，当我点击我的复选框时出现以下错误：

Uncaught ReferenceError: checkvalue is not defined (index):38
onchange

以下是我的jsfiddle的链接：http://jsfiddle.net/LRneA/

Answer 1

checkvalue不在全球范围内。它是ready处理程序的本地，它是一个匿名函数。

我建议不要使用onclick="..."。如果您已经在使用jQuery，请使用jQuery绑定事件：

$("#myCheckBox").on("click", checkvalue); //you will need to give your checkbox
                                          //an id

您可以在onReady处理程序中执行此操作。

我注意到的另一件事：

if($(this).attr("value") != "checked")

不会起作用。复选框的值与被检查的内容无关。请使用:checked伪选择器以及.is：

if($(this).is(":checked"))

Answer 2

函数/标识符checkvalue是 local 到“on ready”函数。

要使用内联事件属性中的checkvalue，必须从相关（全局）范围访问它。例如，

$(document).ready(function(){
   function checkvalue(){
     // ..
   }
   window.checkvalue = checkvalue;
});

但是，通常首选消除使用内联事件。如果元素ID未知，或者事件必须应用于许多元素，则可以使用Event Delegation（即.on）。

jQuery(function($){
   function checkvalue() {
     // ..
   }

   // ideally you'd pick a more refined ancestor than "document"
   $(document).on("click", "checkbox", checkvalue);
});

并且，如果你做继续内联事件，而你做修复了第一个提到的问题，那么你还必须使用apply来正确设置上下文或this将评估处理程序中的窗口对象，这将没有乐趣，并导致其他错误。

onclick="checkvalue.apply(this)"

Javascript函数参考错误，函数未定义

2 个答案: