Question

我有一些复选框，其值包含不同的类别（例如电影，音乐，书籍等）。当用户选中复选框时，会附加值，但我也希望附加类别名称，但仅限于第一次。

示例：

用户检查＆＃34; Mad Max＆＃34;在电影类别下。
附加了复选框值的<li>以及＆＃34;电影＆＃34;得到附加在它上面。
用户检查＆＃34;回到未来＆＃34;，这次不应附加类别名称，因为它已经存在。

此外，如果用户取消选中复选框，我希望删除该值，如果它是最后一个值，则类别名称也将被删除。

我尝试了几种方法，但最大的问题是处理类别名称。

这是我到目前为止所做的......

(function() {


    $('input:checkbox').on('change', function() {

        // Get value of an checkbox
        var value = $(this).parent('label').text();

        // Get value of Category name
        var categoryName = $(this).parents('.modal-body').siblings('.modal-header').children('.modal-title').text();

        //Where to append items
        var list = $('#checkbox-list');

        if ($(this).is(':checked')) {

            $('<span class="item-filter" />' + '<br>').prependTo(list).html('<a href="#" id="delete-filter">X</a>' + value);

            $('<span class="category-title" />' + '<br>').prependTo(list).text(categoryName);

        } else {
            $('#checkbox-list span:contains(' + value + ')').remove();
        }

        //Show Reset and Save buttons 

        $('.filterButton').css('display', 'inline-block');


        // Close button (vissualy delete filter and uncheck specific checkbox)

        $('#filter-sidebar').on('click', '#delete-filter', function(e) {

            e.preventDefault();

            var item = $(this).parents('.item-filter');
            item.remove();

            //reset specific checkbox
            $('label:contains(' + itemValue + ')').closest('input:checkbox').prop('checked', false);

        })
    }); 

    // Reset Button 

    $('#resetFilters').on('click', function(){

        //visually empty the list
        $('#checkbox-list').slideUp().empty();
        $('.filterButton').css('display', 'none');

        //reset all checkboxes 
        $('input:checkbox').prop('checked', false);
    });


})();

Answer 1

好的，所以我不确定这是你的意思，因为你的帖子不是那么清楚，但希望它会让你知道如何去做。

这是DEMO。

要注意的一个关键点是使用.data()函数来访问您添加到HTML元素的自定义数据属性。我在下面的代码中使用它们为每个复选框添加类别值。

所以在你的HTML中我们有：

<input type="checkbox" value="Mad Max" data-category="Movies">

我们可以像这样在jQuery中访问它：

$checkedBox.data('category') // "Movies"

我试图在评论中尽可能多地解释。希望这会有所帮助。

<强>的script.js

// shorthand for $(document).ready(handler)
$(function() {

    var $groupContainers  = $('.group-containers'),

        // out 'model': a list of objects representing user choices
        userChoices       = [];

    $('input:checkbox').on('change', function() {

        var $checkedBox     = $(this),
            checkedBoxLabel = $checkedBox.parent('label').text(),
            checkedValue    = $checkedBox.val(), 
            category        = $checkedBox.data('category'),
            alreadyChecked  = !$checkedBox[0].checked;


        if(alreadyChecked){
          removeChoiceFromModel(category, checkedValue);
        } else {
          addChoiceToModel(category, checkedValue);
        }

        updateDom();

        return;
        /////////////////////////////////////////////////////////

        function cleanGroupContainers(){
          $groupContainers.each(function(){
              var list = $(this).find('ul');

              if(list.length){
                list.remove();
              }
          });
        }


        function updateDom(){

          // reset dom - not efficient but easier to
          // keep list state in sync
          cleanGroupContainers();
          appendChoices();
          hideEmptyLists();
        }

      function appendChoices(){

         var i, option, $categoryDiv,

            len = userChoices.length;

        // if len === 0 then no need to check
        if(!len) return false;

        for(i = 0; i < len; i++){
          option        = userChoices[i];
          $categoryDiv  = $('#' + option.category + '-container');

          $categoryDiv.append('<ul><li>'+option.value+'</li></ul>'); 
        }

      }

      function hideEmptyLists(){

        $groupContainers.each(function(){
            var $container = $(this),
                items = $container.find('ul > li');

            if(!items.length){
              $container.hide();
              // skip to next iteration
              return true;
            }

            $container.show();
        });
      }

      function addChoiceToModel(category, value){
        userChoices.push({
          category: category,
          value: checkedValue
        });
      }

      function removeChoiceFromModel(category, value){

        var i, option,

            len = userChoices.length;

        // if len === 0 then no need to check
        if(!len) return false;

        for(i = 0; i < len; i++){
          option = userChoices[i];

          if(option.category === category && option.value === value){
            // remove choice object from array
            userChoices.splice(i, 1);
            return;
          }
        }

      }

    }); 

});

<强>的index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>

    <div>
      <h4>Movies</h4>
      <label><input type="checkbox" value="Mad Max" data-category="Movies"> Mad Maxx</label>
      <label><input type="checkbox" value="Pulp Fiction" data-category="Movies"> Pulp Fiction</label>
    </div>

    <div>
      <h4>Music</h4>
      <label><input type="checkbox" value="Justin Bieber" data-category="Music"> Justin Bieber</label>
      <label><input type="checkbox" value="One Direction" data-category="Music"> One Direction</label>
    </div>

    <div>
      <h4>Books</h4>
      <label><input type="checkbox" value="Dracular" data-category="Books"> Dracular</label>
      <label><input type="checkbox" value="Trainspotting" data-category="Books"> Trainspotting</label>
    </div>


    <div id="checkbox-list">
      <div id="Movies-container" class="group-containers">
        <h3>Movies</h3>
      </div>
      <div id="Music-container" class="group-containers">
        <h3>Music</h3>
      </div>
      <div id="Books-container" class="group-containers">
        <h3>Books</h3>
      </div>

    </div>




  </body>

</html>

<强>的style.css

.group-containers{
  display: none;
}

如何将复选框值附加到它所属的特定类别

1 个答案: