未捕获的TypeError:无法读取未定义的属性'prop'

时间:2016-04-08 13:15:03

标签: javascript jquery html forms checkbox

我有6个输入复选框,如果选中复选框超过3个,则取消选中最后一个复选框。为了更好地理解,请参阅我之前的 question 。哪个问题已经解决了。

现在,我有另一个问题,Math.random已经检查了3个复选框。单击任何未选中的复选框。我在控制台收到错误。

  

未捕获的TypeError:无法读取未定义的属性'prop'

Fiddle Demo

以下代码:

var random_checked = $("input[type=checkbox]").get().sort(function(){ 
    return Math.round(Math.random())-0.6; //so we get the right +/- combo
}).slice(0,3);
$(random_checked).prop('checked', true);



var checked = [];
$('input[type=checkbox]').change(function(e) {
    var num_checked = $("input[type=checkbox]:checked").length;
    if (num_checked > 3) {
        checked[checked.length - 1].prop('checked', false);
        checked.pop();
    }
    if($.inArray($(this), checked) < 0){
        checked.push($(this));
    }
});

3 个答案:

答案 0 :(得分:3)

您可以尝试以下代码

var checked = $('input[type=checkbox]:checked').map(function(){
 return $(this);
}).get(); // First change
$('input[type=checkbox]').change(function(e) {
    var num_checked = $("input[type=checkbox]:checked").length;
    if (num_checked > 3) {
         $(checked.pop()).prop('checked', false);// Second change
    }
    if($.inArray($(this), checked) < 0){
        checked.push($(this));
    }
});

<强> DEMO FIDDLE

所做的更改

►使用

将当前选中的元素存储到数组中
var checked = $('input[type=checkbox]:checked').map(function(){
 return $(this);
}).get();

$(checked.pop())用于选择最后插入的元素。

为什么您的代码无效?

根据您的代码,var checked = [];在初始阶段将为空。所以checked[checked.length - 1]将变得未定义。

答案 1 :(得分:1)

您应该按检查列表中的初始项目。

$(random_checked).each(function(){
    console.log($(this));
    checked.push($(this));
});

https://jsfiddle.net/usx8Lkc5/18/

答案 2 :(得分:1)

这个可以工作,只需添加lastChecked = random_checked [2];这样就定义了你的lastChecked。

var random_checked = $("input[type=checkbox]").get().sort(function(){ 
 var test = Math.round(Math.random())-0.6;
 return test; //so we get the right +/- combo
}).slice(0,3);

$(random_checked).prop('checked', true);
    lastChecked = random_checked[2];
var $checks = $('input:checkbox').click(function(e) {
    var numChecked = $checks.filter(':checked').length;
    if (numChecked > 2) {
        alert("sorry, you have already selected 3 checkboxes!");
        lastChecked.checked = false;
    }
    lastChecked = this;
});