HTML 表单将选项数组作为值传递给清单

Question

我想找到一个使用 html 和 javascript 的方法。我有一个每周都会修改的表格，我想简化它的编辑。

events_in = ["event_1_date", "event_2_date", etc...]

并且会显示复选框

[] event_1_date  
[] event_2_date

这样就可以正常使用表格了。

表单值的数组输入将每周更新一次新事件。

有一种方法可以使用 php，但无法将其翻译成我想使用的语言。

Answer 1

使用 jQuery（因为您已经包含了 jQuery 标签）。首先在您的表单中添加一个 div：

<div id="checkboxes"></div>

然后在javascript:

$(function() {

    var events_in = ["event_1_date", "event_2_date"],
        events_in_count = events_in.length,
        i = 0;

    for(;i<events_in_count;i++) {

        $('#checkboxes').append('<label><input type="checkbox" name="' + events_in[i] + '">' + events_in[i] + '</label>');

    }

});

Answer 2

你可以尝试这样的事情。

var one = "text here";
var two = "text here"
var array = [["one", one],["two",two]]

window.onload = init;

function init(){
 var checkListItems = document.querySelectorAll(".checklist-items");

 for(var i = 0; i < checkListItems.length; i++){
  updateHTML(checkListItems[i]);
 }
}

function updateHTML(item){
 var id = item.getAttribute("id");
 alert(id)

 for(var i = 0; i < array.length; i++){
  if(array[i][0] == id){
   item.innerHTML = array[i][1];
  }
 }

}

<form action="">
 <input type="checkbox"><span class="checklist-items" id="one">Item</span>
 <input type="checkbox"><span class="checklist-items" id="two">Item</span>
 <input type="checkbox"><span class="checklist-items" id="three">Item</span>
 <input type="checkbox"><span class="checklist-items" id="four">Item</span>
 <input type="checkbox"><span class="checklist-items" id="five">Item</span>
</form>

HTML 表单将选项数组作为值传递给清单

HTML form passing array of options as the values to the checklist

html

javascript

forms

jquery