I have 6 input checkboxes and if checkboxes are checked more than 3 the last one gets unchecked. For better understanding refer my previous question. Which is solved.
我有6个输入复选框,如果选中复选框超过3,则最后一个复选框未选中。为了更好地理解,请参阅我之前的问哪个问题解决了。
Now, I have another problem, Now 3 checkboxes are checked already by Math.random
. On click of any unchecked checkbox. I'm getting error in console.
现在,我有另一个问题,Math.random现在已经检查了3个复选框。单击任何未选中的复选框。我在控制台中遇到错误。
Uncaught TypeError: Cannot read property 'prop' of undefined
未捕获的TypeError:无法读取未定义的属性'prop'
code below:
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 个解决方案
#1
3
You can try the below code
您可以尝试以下代码
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));
}
});
Changes Made
► Stored the currently checked elements to an array using
►使用将当前选中的元素存储到数组中
var checked = $('input[type=checkbox]:checked').map(function(){
return $(this);
}).get();
► $(checked.pop())
is used to select the last inserted element.
►$(checked.pop())用于选择最后插入的元素。
Why your code was not working?
为什么你的代码不起作用?
As per you code var checked = [];
will be empty at the initial stage. So checked[checked.length - 1]
will become undefined.
根据你的代码var checked = [];在初始阶段将是空的。所以检查[checked.length - 1]将变为未定义。
#2
1
You should push initial items in checked list.
您应该在已检查列表中推送初始项目。
$(random_checked).each(function(){
console.log($(this));
checked.push($(this));
});
#3
1
This one works, just simply adding lastChecked = random_checked[2]; so that your lastChecked is defined.
这个工作,只需添加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;
});
#1
3
You can try the below code
您可以尝试以下代码
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));
}
});
Changes Made
► Stored the currently checked elements to an array using
►使用将当前选中的元素存储到数组中
var checked = $('input[type=checkbox]:checked').map(function(){
return $(this);
}).get();
► $(checked.pop())
is used to select the last inserted element.
►$(checked.pop())用于选择最后插入的元素。
Why your code was not working?
为什么你的代码不起作用?
As per you code var checked = [];
will be empty at the initial stage. So checked[checked.length - 1]
will become undefined.
根据你的代码var checked = [];在初始阶段将是空的。所以检查[checked.length - 1]将变为未定义。
#2
1
You should push initial items in checked list.
您应该在已检查列表中推送初始项目。
$(random_checked).each(function(){
console.log($(this));
checked.push($(this));
});
#3
1
This one works, just simply adding lastChecked = random_checked[2]; so that your lastChecked is defined.
这个工作,只需添加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;
});