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

时间:2014-02-28 22:05:15

标签: javascript checkbox

我有以下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/

2 个答案:

答案 0 :(得分:2)

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"))

答案 1 :(得分:0)

函数/标识符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)"