Question

我通过从一组值中检索复选框来遇到一些问题。

我尝试自动检查数组所关注的复选框。

array [i]生成一些复选框输入 target [i]是一个包含一些复选框值的数组。因此，当我刷新页面时，我必须看到“星期二”和“星期日”已被选中。参见片段（我不知道我是否正确解释）

// 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

感谢您的帮助。此致

Answer 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>

Answer 2

设置cb.checked = true以在创建时选中复选框。

if (target.indexOf(cap) != -1) {
    cb.checked = true;
}

添加代码段：

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);

Answer 3

您可以检查一个数组是否包含特定字符串： Array.prototype.includes() ^ES6或
Array.prototype.indexOf()

另请不要忘记<label>可以包装您的input和text- 标签

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>

Answer 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>

通过重新查看其值来自动检查复选框

4 个答案: