Динамические флажки в HTML

0

Я застрял в точке, где мне нужно показывать флажки динамически в зависимости от выбранного значения выпадающего списка. У меня есть код для этого, в котором я могу использовать для цикла до нужного числа, но есть ли способ уменьшить длинный длинный код. Ниже мой код.

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


        }.
  • 0
    Возможный дубликат - stackoverflow.com/questions/13330202/…
  • 0
    используйте jquery, например $ ('<input type = "checkbox" name = "name" id = "check_id">')
Теги:

1 ответ

0

Есть более компактные способы сделать все это с помощью jQuery или конкатенацией HTML, но, тем не менее, вы решили реализовать его, если вы делаете это несколько раз, поместите его в функцию с разумным именем. Я предполагаю (дайте мне знать, если я догадался не так!), Что вам нужен более компактный код, потому что вы копируете и вставляете его в кучу блоков if. Это очень плохая идея. Это ужасно читать и быстро становится недостижимым.

Второй вариант, еще лучше, чем копирование и вставка всей пачки, состоит в том, чтобы объявить четыре переменные - параметры для функции ниже - перед вашей цепочкой if/else и ничего не делать в тех блоках if, но назначать разные идентификаторы или независимо от переменных. Затем создайте флажок один раз в конце всего, используя переменные, которые вы настроили. В любом случае вы записываете код создания один раз и подаете его параметры, которые изменяют его поведение. Это называется "параметризация" по причинам, которые теперь должны быть слишком очевидными.

И он позволяет превратить любой длинный и грязный фрагмент кода в самодокументирующийся однословный вызов функции, не полагаясь на что-либо умное в отношении среды. Конечно, вы должны узнать все, что можете о среде: очень часто кто-то еще написал именно ту функцию, которая вам нужна, но вы не можете рассчитывать на это.

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню