[英]change variable with onclick function
我試圖做一個功能,將:
目前,我的問題與onclick函數的范圍有關。
function getCheckboxes(checkboxLimit) {
// clear cbl
cbl = ['','','',''];
// contstuct list of checkbox tags
inputs = document.getElementsByTagName('input');
var checkboxes = [];
for ( var i = 0 ; i < inputs.length ; i++ ) {
if (inputs[i].type == 'checkbox')
checkboxes.push(inputs[i]);
}
上面的所有代碼都可以使用,但是下面的代碼是我遇到問題的地方。 在“ onclick”之后執行的函數運行良好,因為如果我在函數中提醒cbl,它將按我的意願運行(如下所示)。 但是,一旦在“ onclick”功能之后向cbl發出警報,它便不再相同。
// construct list of checked checkboxes (limited)
for ( var i = 0 ; i < checkboxes.length ; i++ ) {
// if any checkbox is clicked
checkboxes[i].onclick = function() {
var checkCount = 0;
// run through each of the checkboxes
for ( var j = 0 ; j < checkboxes.length ; j++ ) {
// if index checkbox is checked
if ( checkboxes[j].checked == true ) {
// add to count
checkCount++;
// if count is above limit, uncheck
// otherwise add to list
if ( checkCount > checkboxLimit)
this.checked = false;
else
cbl[checkCount-1] = checkboxes[j].id;
}
}
// alert that displays cbl how I want
alert(cbl);
}
// alert that does not display cbl how I want
alert(cbl);
}
}
那有什么辦法可以解決這個范圍問題? 我寧願不使用JQuery,但任何可以使我擁有功能代碼的方法都可以在此時工作。
嘗試更多類似這樣的方法:
function checkboxValidate(collection, min, max){
var mn = typeof min === 'undefined' ? 0 : min;
var mx = typeof max === 'undefined' ? Infinity : max;
var cb = [], n = 0;
for(var i=0,l=collection.length; i<l, i++){
var c = collection[i];
if(c.type === 'checkbox' && c.checked){
cb.push(c); n++;
}
}
if(n < mn){
// somthing.innerHTML = 'Minimum Requirement Failure';
return false;
}
else if(n > mx){
// somthing.innerHTML = 'Maximum Requirement Failure';
return false;
}
else{
return cb;
}
}
anotherElement.onclick = function(){
var checkedArray = checkboxValidate(document.getElementsByTagName('input'), 0, 3));
if(checkedArray && checkedArray[0]){
// checkedArray has each checkbox Element - more properties than just `id`
}
else{
// checkedArray would be false or not have any checked with min 0
}
}
根據需要進行調整。
非跨瀏覽器的原油樣品。 也許您可以從中得到一些東西:
function limitCheck(n) {
var x = [];
document.addEventListener('click', function(e) {
var i, t = e.target;
if (t.type === 'checkbox') {
if ((i = x.indexOf(t.id)) > -1) {
console.log('remove ' + i + ', ' + t.id);
x.splice(i, 1);
} else if (x.length < n) {
x.push(t.id);
} else {
console.log('LIM');
e.preventDefault();
e.stopPropagation();
}
console.log(x);
}
});
}
limitCheck(4);
沒有調試:
function limitCheck(n) {
var x = [];
document.addEventListener('click', function(e) {
var i, t = e.target;
if (t.type === 'checkbox') {
if ((i = x.indexOf(t.id)) > -1) {
x.splice(i, 1);
} else if (x.length < n) {
x.push(t.id);
} else {
e.preventDefault();
e.stopPropagation();
}
}
});
}
您可以將單擊偵聽器放置在復選框的祖先上,可能它們是采用表單的形式,因此可以使用它。 您還需要考慮一個重置按鈕和默認情況下選中的按鈕(因此,您還需要在頁面加載時運行該功能以預先填充列表):
var checkboxLimit = 4;
var cbl;
function limitCheckboxes(form, event) {
// Clear checkbox list
var cblTemp = [];
// get element that the click came from
var tgt = event.target || event.srcElement;
// See if it was a reset
var reset = tgt.type == 'reset';
// Count checked checkboxes
// If click was from reset, reset the checkbox first
var cb, cbs = form.getElementsByTagName('input');
for (var i=0, iLen=cbs.length; i<iLen; i++) {
cb = cbs[i];
if (cb.type == 'checkbox') {
cb.checked = reset? cb.defaultChecked : cb.checked;
if (cb.checked) {
cblTemp.push(cb.id);
}
}
}
// If too many, remove the last one that was checked,
// uncheck it and show a message
if (cblTemp.length > checkboxLimit && tgt.type == 'checkbox') {
cblTemp.splice(cblTemp.indexOf(tgt.id), 1);
tgt.checked = false;
console.log('removed ' + tgt.id);
}
// update cbl
cbl = cblTemp;
// Debug
console.log(cbl);
}
您還可以使用querySelectorAll一次性獲得選中的復選框:
var cb, cbs = document.querySelectorAll('input[type="checkbox"]');
for循環更簡單:
for (var i=0, iLen=cbs.length; i<iLen; i++) {
cb = cbs[i];
cb.checked = reset? cb.defaultChecked : cb.checked;
if (cb.checked) {
cblTemp.push(cb.id);
}
}
使用一個類會更好,因此您可以擁有不屬於受限集的其他復選框。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.