我如何查看我的所有复选框是否都被选中？
[英]How do i see if all my checkboxes are checked or not?
问题描述
I am trying to check if all the checkboxes on my page is not checked.
我正在尝试检查是否未选中我页面上的所有复选框。 This is what I came up with:这就是我想出的：
var allCheckboxes = document.getElementsByClassName("cl");
console.log(allCheckboxes);
function checkCheckbox(allCheckboxes) {
for (let index = 0; index < allCheckboxes.length; index++) {
if (allCheckboxes[index].checked == false) {
console.log(allCheckboxes[index] + "is UNCHECKED")
}
else {
console.log(allCheckboxes[index] + "is CHECKED")
}
}
}
I have set the class 'cl' to every checkbox in my HTML-file.我已将 class 'cl' 设置为我的 HTML 文件中的每个复选框。
When I run the function, it will anyways ay that everything is unchecked, even if there is one that is checked.当我运行 function 时，它无论如何都会显示所有内容都未选中，即使有一个已选中。
Where i execute the function:我在哪里执行 function：
function generateGraph(url) {
//Here are the arrayes used to find the data in the json file
//These will be reset everytime the generate button is pressed
var arrayTheta = [];
var arrayRange = [];
var mcsArray = [];
var channelArray = [];
var caseArray = [];
//Getting the data from json-file (function) {NOTE: gotta figure out a way to get data from multible JSON-files}
async function getData(arrayRange, arrayTheta, url, graphLabels, mcsArray, channelArray, caseArray,) {
//Gets data from the JSON-file, were the url is the box that is checked
const response = await fetch(url);
const productData = await response.json();
for (let index = 0; index < productData.length; index++) {
arrayTheta.push(productData[index].theta);
arrayRange.push(productData[index].Range);
}
//The graph, copied from Chart.js, but changed for our prefrence
const ctx = document.getElementById('chart').getContext('2d');
window.myChart = new Chart(ctx,{ // having the "myChart" as a window. insted of const was sugested by someone on StackOverflow (makes the const global, i can therefor use it in another function)
type: 'line',
data: {
labels: arrayTheta,
datasets: [{
label: graphLabels,
data: arrayRange,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 0,
//The line under "tension: 0.4" makes the graph a little bit smoother
tension: 0.4
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
,x: {
display: true,
type: 'linear'
}
}
}
});
document.getElementById('clear').disabled = false // Will enable the clear button
checkCheckbox(allCheckboxes)
}
I execute the function inside of another function.我在另一个 function 内部执行 function。
HTML: HTML：
<div class="grey-container">
<!--FIRST SPAN::Device-->
<!--IMPORTANT NOTE -- Span is for individual checklist-->
<span>
<ul>
<h3>Link Database (AP-STA)</h3>
<li>
<input type="checkbox" name="cl" class="device" id="PRM2143-PRM2142" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="PRM2143-PRM2142">PRM2143-PRM2142</label>
</li>
<li>
<input type="checkbox" name="PRM2143-PRM2143" class="device" id="PRM2143-PRM2143" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="PRM2143-PRM2143">PRM2143-PRM2143</label>
</li>
<li>
<input type="checkbox" name="PRM2143-PRM2141" class="device" id="PRM2143-PRM2141" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="PRM2143-PRM2141">PRM2143-PRM2141</label>
</li>
<li>
<input type="checkbox" name="PRM2141dish-PRM2142" class="device" id="PRM2141dish-PRM2142" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="PRM2141dish-PRM2142">PRM2141dish-PRM2142</label>
</li>
<li>
<input type="checkbox" name="PRM2141dish-PRM2141dish" class="device" id="PRM2141dish-PRM2141dish" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="PRM2141dish-PRM2141dish">PRM2141dish-PRM2141dish</label>
</li>
<li>
<input type="checkbox" name="PRM2141dish-PRM2141" class="device" id="PRM2141dish-PRM2141" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="PRM2141dish-PRM2141">PRM2141dish-PRM2141</label>
</li>
</ul>
</span>
<!--SECOND SPAN::Case-->
<span>
<ul>
<h3>Case Selection (AP-STA)</h3>
<li>
<input type="checkbox" name="Boresight-Boresight" id="Boresight-Boresight" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="Boresight-Boresight">Boresight-Boresight</label>
</li>
<li>
<input type="checkbox" name="Omni-Boresight" id="Omni-Boresight" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="Omni-Boresight">Omni-Boresight</label>
</li>
<li>
<input type="checkbox" name="Omni-Maxscan" id="Omni-Maxscan" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="Omni-Maxscan">Omni-Maxscan</label>
</li>
<li>
<input type="checkbox" name="Maxscan-Maxscan" id="Maxscan-Maxscan" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="Maxscan-Maxscan">Maxscan-Maxscan</label>
</li>
</ul>
</span>
<!--THIRD SPAN::mcs-->
<span>
<ul>
<h3>MCS</h3>
<li>
<input type="checkbox" name="0" id="mcs0" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs0">0</label>
</li>
<li>
<input type="checkbox" name="1" id="mcs1" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs1">1</label>
</li>
<li>
<input type="checkbox" name="2" id="mcs2" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs2">2</label>
</li>
<li>
<input type="checkbox" name="3" id="mcs3" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs3">3</label>
</li>
<li>
<input type="checkbox" name="4" id="mcs4" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs4">4</label>
</li>
<li>
<input type="checkbox" name="5" id="mcs5" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs5">5</label>
</li>
<li>
<input type="checkbox" name="6" id="mcs6" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs6">6</label>
</li>
<li>
<input type="checkbox" name="7" id="mcs7" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs7">7</label>
</li>
<li>
<input type="checkbox" name="8" id="mcs8" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs8">8</label>
</li>
<li>
<input type="checkbox" name="9" id="mcs9" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs9">9</label>
</li>
<li>
<input type="checkbox" name="10" id="mcs10" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs10">10</label>
</li>
<li>
<input type="checkbox" name="11" id="mcs11" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs11">11</label>
</li>
<li>
<input type="checkbox" name="12" id="mcs12" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="mcs12">12</label>
</li>
</ul>
</span>
<!--THIRD SPAN::Channel-->
<span>
<ul>
<h3>Channel</h3>
<li>
<input type="checkbox" name="1" id="channel1" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="channel1">1</label>
</li>
<li>
<input type="checkbox" name="2" id="channel2" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="channel2">2</label>
</li>
<li>
<input type="checkbox" name="3" id="channel3" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="channel3">3</label>
</li>
<li>
<input type="checkbox" name="4" id="channel4" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="channel4">4</label>
</li>
<li>
<input type="checkbox" name="5" id="channel5" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="channel5">5</label>
</li>
<li>
<input type="checkbox" name="6" id="channel6" class="cl" onchange="document.getElementById('reset').disabled = false, document.getElementById('generate').disabled = false">
<label for="channel6">6</label>
</li>
</ul>
</span>
<div id="button-container">
<button type="button" id="generate" onclick="generateGraph(url)" disabled><span>Generate</span> Chart</button>
<button type="button" id="clear" onclick="clearCanvas()" disabled><span>Clear</span> Chart</button>
<button type="button" id="reset" onclick="resetCheckbox()" disabled><span>Reset</span> Checkboxes</button>
</div>
<!--Canvas for charts-->
<div id="canvas-container">
<canvas id="chart"></canvas>
<canvas id="chart2"></canvas>
</div>
I hope this is enough code to help me, but if it is needed more information, just ask.我希望这是足够的代码来帮助我，但如果需要更多信息，请询问。 Thanks in advance!提前致谢！
1 个解决方案
解决方案1
0 2022-08-08 10:14:55
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"/>
<body>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
<br>
</body>
<script>
$(document).ready(function(){
setInterval(function(){
var lstChk = $('input[type=checkbox]');
for(var i=0;i<lstChk.length;i++) { console.log(lstChk[i].checked); } },5000); });
</script>
<html>
here in every 5 second it will check all the check box, result will be print on console每隔 5 秒，它会检查所有复选框，结果将在控制台上打印
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何检查我的复选框是否已选中？ - How can I check to see if my checkboxes are checked?
如何检查页面上的所有复选框是否都已选中？ - How do I check if any checkboxes at all on the page are checked?
在JQuery中，如何将“已检查”复选框的所有值加在一起？ - In JQuery, how do I add all the values of “checked” checkboxes together?
如何序列化选中的复选框？ - How do I serialize checked checkboxes?
如果选中所有复选框，则执行此操作；否则，请执行此操作（jQuery） - Do this if all checkboxes are checked or this if not (jQuery)
我可以将所有复选框都选中还是取消选中吗？ - Can I make all checkboxes checked and unchecked do the same thing?
如何获取所有选中的复选框 - How to get all checked checkboxes
如果在数组中签入一个复选框，我如何禁用或取消选中所有复选框？ - How I disable or uncheck all checkboxes, if one checked in array?
如何查看我的所有Divs是否都上课？ - How do I See if All of My Divs Have Class?
如果表单中有多个复选框，如何通过当前选中的所有复选框？ - If I have multiple checkboxes in a form how can I pass all the checkboxes that are currently checked?
相关标签