Question

我有一组复选框。每当我选中一个复选框时，我都希望将其标签写入容器。当我取消选中相同的复选框时，我希望删除写入容器的标签。这是我到目前为止所拥有的

var topicSearchList = $('.filtered-keywords .topics ul');

$('.dropdown-filter-menu').find('input[type=checkbox]').change(function() {

  var labelChecked = $("label[for='" + this.id + "']").text();

  if (this.checked) {
    $(topicSearchList).append('<li>' + labelChecked + '</li>');

  } else if (!this.checked) {
    $('.filtered-keywords ul li').val(labelChecked).remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-filter-menu">
  <li>
    <input type="checkbox" id="one" />
    <label for="one">Topic One</label>
  </li>
  <li>
    <input type="checkbox" id="two" />
    <label for="two">Topic Two</label>
  </li>
  <li>
    <input type="checkbox" id="three" />
    <label for="three">Topic Three</label>
  </li>
</ul>

<!-- This is where I want the selected labels to populate -->
<div class="filtered-keywords">
  <ul></ul>
</div>

Answer 1

试试这个：http://jsfiddle.net/lotusgodkk/GCu2D/419/

JS：

$(document).ready(function () {
    $('.dropdown-filter-menu').on('change', 'input[type="checkbox"]', function () {
        var str = '';
        $('.dropdown-filter-menu input:checked').each(function () {
            str += $(this).next('label').text();
        });
        $('.filtered-keywords').text(str);
    });
});

更新：添加到ul。

JS：

$(document).ready(function () {
    $('.dropdown-filter-menu').on('change', 'input[type="checkbox"]', function () {
        $('.filtered-keywords ul').empty();
        $('.dropdown-filter-menu input:checked').each(function () {
            var li = $('<li></li>');
            li.text($(this).next('label').text());
            $('.filtered-keywords ul').append(li);
        });
    });
});

演示：http://jsfiddle.net/lotusgodkk/GCu2D/420/

Answer 2

希望这会有所帮助，请尝试：http://jsfiddle.net/kurund/bmszxjqm/6/

$(function(){
    $('input[type="checkbox"]').on('click', function() {
        var topics = '';
        $('input[type="checkbox"]:checked').each(function() {
            topics += '<li>' + $(this).next().html() + '</li>';
        });
        $(".filtered-keywords ul").html(topics);
    });
});

JQuery从选定的输入复选框创建UL

2 个答案: