html中的动态复选框

Question

我陷入困境，我需要动态显示复选框，具体取决于下拉列表的选定值。我有这个代码，我可以使用循环直到我想要的数字，但有没有办法减少冗长的代码。 以下是我的代码。

     if(drop_val == 'test')
        {
            var checkbox = document.createElement('input');
            checkbox.type = "checkbox";
            checkbox.name = "name";
            checkbox.value = "value";
            checkbox.id = "chk_id";

            var label = document.createElement('label')
            label.htmlFor = "chk_id";
            label.appendChild(document.createTextNode('test'));


            document.getElementById('check').appendChild(checkbox);
            document.getElementById('check').appendChild(label);


        }.

Answer 1

使用jQuery或连接HTML可以使用更简洁的方法来完成所有这些操作，但是如果您不止一次地执行它，请将其放在具有合理名称的函数中。我猜测（如果我猜错了，请告诉我），你想要更紧凑的代码，因为你要将它复制并粘贴到一堆if块中。这是一个非常糟糕的主意。读起来很恐怖，很快变得无法维护。

第二速率选项，仍然比复制和粘贴整个wad更好，是在if / else链之前声明四个变量 - 下面函数的参数，如果是块但是分配则不执行任何操作不同的id或变量的任何内容。然后使用您设置的变量在整个事物的末尾创建一次复选框。无论哪种方式，您只需编写一次创建代码并将其输入参数，这会改变其行为。这被称为＆＃34;参数化＆＃34;，原因现在必须非常明显。

它可以让你将任何冗长而混乱的代码转换成一个自我记录的单字函数调用，而不必依赖任何聪明的环境。当然，你应该尽可能地了解环境：很多时候，其他人已经准确地编写了你需要的功能，但你不能指望它。

if (drop_val == 'test')
{
    createCheckbox('check', 'blah', 'Blah blah blah', false);
}
else if ( drop_val == 'Mae West' )
{
    createCheckbox('check', 'maewest', 'Va va va voom', false);
}

//  Snip...

function createCheckbox(parentID, chkID, labelText, isChecked)
{
    var cb = document.createElement('input');

    cb.type = "checkbox";
    cb.name = chkID;
    cb.value = "yes";
    cb.id = chkID;
    cb.checked = isChecked;

    var lbl = document.createElement('label')
    lbl.htmlFor = chkID;
    lbl.appendChild(document.createTextNode(labelText));

    document.getElementById(parentID).appendChild(cb);
    document.getElementById(parentID).appendChild(lbl);

    //  If nobody wants this, they can just ignore it. 
    return { checkbox: cb, label: lbl };
}