英文:
How to get the unchecked checkboxes in a js?
问题
var checkBoxesEnabled = document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
checkBoxesEnabled[i].addEventListener('click', function () {
var uncheckedcount = 0;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
if (checkBoxesEnabled[i].checked === false) {
uncheckedcount++;
}
}
if (uncheckedcount > limit) {
alert('You cannot disable more than 2');
}
});
}
<div id="excludedNumbers">
<div class="form-group">
<div class=" form-check">
<input class="form-check-input" checked type="checkbox" value="0" id="add0">
<label class="form-check-label" for="add0">0</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="1" id="add1">
<label class="form-check-label" for="add1">1</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="2" id="add2">
<label class="form-check-label" for="add2">2</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="3" id="add3">
<label class="form-check-label" for="add3">3</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="4" id="add4">
<label class="form-check-label" for="add4">4</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="5" id="add5">
<label class="form-check-label" for="add5">5</label>
</div>
</div>
</div>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var checkBoxesEnabled =document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
checkBoxesEnabled[i].addEventListener('click', function () {
var uncheckedcount = 0;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
if(checkBoxesEnabled[i].checked === false > limit){
alert('You cannot disable more than 2');
}
}
});
}
<!-- language: lang-html -->
<div id="excludedNumbers">
<div class="form-group">
<div class=" form-check">
<input class="form-check-input" checked type="checkbox" value="0" id="add0">
<label class="form-check-label" for="add0">0</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="1" id="add1">
<label class="form-check-label" for="add1">1</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="2" id="add2">
<label class="form-check-label" for="add2">2</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="3" id="add3">
<label class="form-check-label" for="add3">3</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="4" id="add4">
<label class="form-check-label" for="add4">4</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="5" id="add5">
<label class="form-check-label" for="add5">5</label>
</div>
<!-- end snippet -->
I have a 5 checkboxes, Where all of them were checked.
The maximum 2 should be unchecked, with all the 3 checked.
It didnt work, not sure what was wrong
How could I get the alert, if more than 2 checkboxes were unchecked?
答案1
得分: 1
你需要在每次找到选中的复选框时增加计数器的值，然后与限制变量的值进行比较。如果超过限制，就会弹出警报。
var checkBoxesEnabled = document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
checkBoxesEnabled[i].addEventListener('click', function () {
var uncheckedCount = 0;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
if (checkBoxesEnabled[i].checked === false) uncheckedCount++;
if (limit < uncheckedCount) {
alert('You cannot disable more than 2');
break;
}
}
});
}
英文:
You need to increase the counter each time you find a checked checkbox and then compare it with the value of the limit variable. Raise an alert if the limit is crossed.
var checkBoxesEnabled =document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
checkBoxesEnabled[i].addEventListener('click', function () {
var uncheckedcount = 0;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
if(checkBoxesEnabled[i].checked === false) uncheckedcount++;
if (limit < uncheckedcount) {
alert('You cannot disable more than 2');
break;
}
}
});
}
答案2
得分: 1
1- 在你的for循环中使用let。
2- 不需要在另一个循环中使用循环。
3- 只需使用一个计数器来累加复选框未选中的次数，然后与你的限制进行比较。
英文:
1- use let in your for loop
2- no need for a loop inside another loop
3- just use a counter to sum how many times a checkbox was unchecked and then compare to your limit
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const checkBoxesEnabled = document.querySelectorAll('.form-check-input');
const limit = 2;
let uncheckedcount = 0;
for (let i = 0; i < checkBoxesEnabled.length; i++) {
checkBoxesEnabled[i].addEventListener('click', function() {
if (checkBoxesEnabled[i].checked === false) {
uncheckedcount++;
} else {
uncheckedcount--;
}
if (uncheckedcount > limit) {
alert('You cannot disable more than 2');
}
});
}
<!-- language: lang-html -->
<div id="excludedNumbers">
<div class="form-group">
<div class=" form-check">
<input class="form-check-input" checked type="checkbox" value="0" id="add0">
<label class="form-check-label" for="add0">0</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="1" id="add1">
<label class="form-check-label" for="add1">1</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="2" id="add2">
<label class="form-check-label" for="add2">2</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="3" id="add3">
<label class="form-check-label" for="add3">3</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="4" id="add4">
<label class="form-check-label" for="add4">4</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="5" id="add5">
<label class="form-check-label" for="add5">5</label>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论