Question

我试图实现可以填充4个复选框的几个属性并从特定数组添加标签的功能。我不想附加整个标记。我将所有内容保留在标记上，然后需要根据选择菜单的选择来修饰属性。

var _select = $('#opt');
var _container = $('#teams');

var FF1 = [{
        display: "Week 1",
        value: "Week-1"
    },
    {
        display: "Week 2",
        value: "Week-2"
    },
    {
        display: "Week 3",
        value: "Week-3"
    },
    {
        display: "Week 4",
        value: "Week-4"
    }
];

var FF2 = [{
        display: "Week 5",
        value: "Week-5"
    },
    {
        display: "Week 6",
        value: "Week-6"
    },
    {
        display: "Week 7",
        value: "Week-7"
    },
    {
        display: "Week 8",
        value: "Week-8"
    }
];


_select.on('change', function() {
    var parent = $(this).val();
    _container.removeClass('is-hidden');

    switch (parent) {
        case 'FF1':
            weekList(FF1);
            break;
        case 'FF2':
            weekList(FF2);
            break;
        default:
            break;
    }

});

function weekList(array_list) {
    $(array_list).each(function(i) {
        console.log(array_list[i]);

    });
}

.is-hidden {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="opt">
	<option value="">Select Option</option>
  	<option value="FF1">FF1</option>
  	<option value="FF2">FF2</option>
</select>

<div id="teams" class="is-hidden">
    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck1" id="" />
        <label for="" class="lb1"></label>
    </div>

    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck2" id="" />
        <label for="" class="lb2"></label>
    </div>

    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck3" id="" />
        <label for="" class="lb3"></label>
    </div>

    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck4" id="" />
        <label for="" class="lb4"></label>
    </div>
</div>

有人可以在这里帮助我吗？

谢谢！

干杯！

Answer 1

下面的代码可能会有所帮助，只需替换函数weekList（）中的循环即可。

$(array_list).each(function (i) {
    var Id = (i + 1)
    $('.ck' + Id).val(array_list[i].value);  // update checkbox values
    $('.ck' + Id).attr("id", ("ck"+ Id));    // update checkbox id
    $('.lb' + Id).text(array_list[i].display)// update label text
    $('.lb' + Id).attr("for",("ck"+ Id))     // update label for text
});

Answer 2

尝试一下-

function weekList(array_list) {
  var boxes = '';
  $(array_list).each(function(i) {

    boxes += `
                <div class="">
                  <input type="checkbox" name="${array_list[i]['value']}" class="ck1" value="${array_list[i]['value']}" />
                  <label for="${array_list[i]['value']}" class="lb1">${array_list[i]['display']}</label>
                </div>
            `;

  });

  document.getElementById('teams').innerHTML = boxes;
}

html-

<select id="opt">
  <option value="">Select Option</option>
  <option value="FF1">FF1</option>
  <option value="FF2">FF2</option>
</select>

<div id="teams">

</div>

从jQuery中的数组填充复选框和标签属性

2 个答案: