通过检索它们的值来自动检查复选框
Posted
技术标签:
【中文标题】通过检索它们的值来自动检查复选框【英文标题】：Auto check checkboxes by retriving their values 【发布时间】：2017-11-01 12:25:29 【问题描述】：我在从一组值中检索复选框时遇到了一些问题。
我尝试自动检查数组所关注的复选框。
array[i] 生成一些复选框的输入 target[i] 是一个包含一些复选框值的数组。所以当我刷新页面时，我必须看到“星期二”和“星期三”已经被选中。 cf.sn-p （不知道我解释的对不对）
// table which generate checkboxes
var array = new Array();
array[0]="Monday";
array[1]="Tuesday";
array[2]="Wendesday";
array[3]="Thirsday";
array[4]="Friday";
array[5]="Saturday";
array[6]="Sunday";
// values to of checkboxes I want to auto-check
var target = new Array();
target[0]="Tuesday";
target[1]="Wendesday";
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
for (var i in array)
//Name of checkboxes are their number so I convert the i into a string.
j = i.toString();
val = j;
//cap will be the value/text of array[i]
var cb = document.createElement('input');
var label= document.createElement("label");
cap = array[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
box-sizing: border-box;
#data
padding:5px;
width:100vw;
.multiselect
overflow: visible;
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
white-space: normal;
height:50px;
.checkboxes
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
label
display: inline-block;
border: 1px grey solid;
padding:5px;
<form>
<div id="data">
<div class="multiselect">
<div id="c_b">
<div id="checkboxes">
</div>
</div>
</div>
</div>
</form>
Tuesday and Wendesday have to be automitacly checked感谢您的帮助。 问候
【问题讨论】：
“所以当我刷新页面时...” 当你刷新页面时，整个东西都会重新加载，从头开始。您的阵列将消失。如果您想要这种行为，您必须将数组保存在某处（localStorage、cookie、服务器端等），然后在页面加载时检索数组。
不，因为当页面被重新加载时，javascript中有数组，所以它会自动检查相关的复选框。我不想存储它。当用户到达时，这两个选项已经被选中。
您将“到达”页面与“刷新”页面混淆了。当页面刷新时，所有内容都消失了，所有代码都从头开始重新处理。
【参考方案1】：
“所以当我刷新页面时……” 当你刷新页面时，整个东西都会重新加载，从头开始。您的阵列将消失。如果您想要这种行为，您必须将数组保存在某处（localStorage、cookie、服务器端等），然后在页面加载时检索数组。
如果这不是您的意思，并且您只想拥有一个静态数组，那么您需要访问该数组并在页面加载时选中复选框。
您有很多不需要的代码，因此更正后的版本如下所示：
// Master array from which checkboxes are created (uses "array literal" syntax for shorter typing)
var cbArray = ["Monday", "Tuesday", "Wendesday", "Thirsday", "Friday", "Saturday", "Sunday"];
// values to of checkboxes I want to auto-check
var target = ["Tuesday", "Wendesday"];
// Get element that will contain checkboxes
var cbh = document.getElementById('checkboxes');
const checkboxGroupName = "chkDays"; // It is common to give all checkboxes in a group the same name
// Loop through the master array and make labels and checkboxes based on what's in it
cbArray.forEach(function(item, index)
// Create and configure checkbox
var cb = document.createElement('input');
cb.type = 'checkbox';
cb.value = item;
cb.name = checkboxGroupName;
cb.id = checkboxGroupName + (index + 1);
// If new checkbox is supposed to be checked, check it
target.forEach(function(val)
if(cb.value === val)
cb.checked = true;
);
// Create and configure label
var label= document.createElement("label");
label.setAttribute("for", cb.id); // Labels should target an element's id
label.textContent = item; // No need to go through the trouble of making a text node
// Append elements into the DOM
label.appendChild(cb);
cbh.appendChild(label);
// Confirming Output:
console.log(label.outerhtml);
);* box-sizing: border-box;
#data padding:5px; width:100vw;
.multiselect
overflow: visible;
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
white-space: normal;
height:50px;
.checkboxes
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
label display: inline-block; border: 1px grey solid; padding:5px; <form>
<div id="data">
<div class="multiselect">
<div id="c_b">
<div id="checkboxes"></div>
</div>
</div>
</div>
</form>【讨论】：
【参考方案2】：您可以检查一个数组是否包含特定字符串：Array.prototype.includes() ES6 或Array.prototype.indexOf()
另外不要忘记<label> 可以包装你的input 和文本-标签
var cbh = document.getElementById('checkboxes'),
dayNames = ["Monday","Tuesday","Wendesday","Thirsday","Friday","Saturday","Sunday"],
preselect = ["Tuesday", "Wendesday"];
for (var i in dayNames)
var day = dayNames[i];
var label = document.createElement("label"),
cb = document.createElement('input'),
text = document.createTextNode(day);
cb.type = 'checkbox';
cb.name = day;
cb.value = i;
// PRESELECT MATCHING inputs
// if(preselect.includes(day)) cb.checked = true; // or like:
if(preselect.indexOf(day) > -1) cb.checked = true;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
<div id="checkboxes"></div>【讨论】：
【参考方案3】：设置cb.checked = true 以在创建时选中复选框。
if (target.indexOf(cap) != -1)
cb.checked = true;
添加sn-p：
function getCheckbox(value, label, checked)
var cb = document.createElement('input');
cb.value = value;
cb.checked = checked;
var label = document.createElement('label');
label.innerHTML = label;
return [cb, label];
var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
var checked = ['Tuesday', 'Wednesday'];
var cbh = document.getElementById('checkboxes');
var container = document.createDocumentFragment();
for (var i=0, len=days.length; i < len; i++)
var dom = getCheckbox(i, days[i], checked.indexOf(days[i]) != -1);
container.appendChild(dom[0]);
container.appendChild(dom[1]);
cbh.appendChild(container);
【讨论】：
你可以更新snipet，所以我会清楚地看到我应该怎么做以及在哪里做。目标是如果我更改数组中的值，它将检查另一个复选框 在循环中创建 dom 时，最好使用函数或闭包，这样引用就不会产生问题。【参考方案4】：@Scott Marcus 提供了更好的解决方案，但您也可以试试这个，
<!-- language: lang-css -->
<style>
*
box-sizing: border-box;
#data
padding:5px;
width:100vw;
.multiselect
overflow: visible;
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
white-space: normal;
height:50px;
.checkboxes
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
label
display: inline-block;
border: 1px grey solid;
padding:5px;
</style>
<!-- language: lang-html -->
<form>
<div id="data">
<div class="multiselect">
<div id="c_b">
<div id="checkboxes">
</div>
</div>
</div>
</div>
</form>
<!-- end snippet -->
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<script>
// table which generate checkboxes
var array = new Array();
array[0]="Monday";
array[1]="Tuesday";
array[2]="Wendesday";
array[3]="Thirsday";
array[4]="Friday";
array[5]="Saturday";
array[6]="Sunday";
// values to of checkboxes I want to auto-check
var target = new Array();
target[0]="Tuesday";
target[1]="Wendesday";
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
for (var i in array)
//Name of checkboxes are their number so I convert the i into a string.
j = i.toString();
val = j;
//cap will be the value/text of array[i]
var cb = document.createElement('input');
var label= document.createElement("label");
cap = array[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
//added
target.forEach(function(a)
if(cap == a)
cbh.appendChild(cb).click();
else
cbh.appendChild(cb);
);
//added
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
</script>
【讨论】：
以上是关于通过检索它们的值来自动检查复选框的主要内容，如果未能解决你的问题，请参考以下文章
c＃如何获取已检查的datagridview复选框旁边的值？