jquery：如果未选中复选框，则删除选定的值答案

【问题标题】：jquery: remove the selected value if checkbox is uncheckedjquery：如果未选中复选框，则删除选定的值
【发布时间】：2015-05-13 15:03:30
【问题描述】：

我正在显示带有复选框的项目列表，如果选中复选框，则所选项目的值显示在不同的 div 中。

现在，如果我取消选中该复选框，我应该删除 div 中显示的项目。请帮我解决这个问题？

$('input[name="selectedItems1"]').click(function(){
            if (this.checked) {                   

            }else{                    
                //what should go here
            }
        });

【问题讨论】：

为此你需要分享你是如何添加项目的

标签： javascript jquery html

【解决方案1】：

这个例子可以帮助你：

html

<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>

jquery

$('input[name="selectedItems1"]').click(function(){ 
  if (this.checked) {
    var span = "<span id='" + this.value + "'>" + this.value + "</span>";
    $("#result").append(span);
  }else{
    $("#" + this.value).remove();//what should go here
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>

【讨论】：

【解决方案2】：

这是完成任务的一种方法。以下方式还保留了所选数据的显示顺序。

var selectedItemsContainer = $('#selected');
var items = $('input[name="items"]');

items.on('change', function(){
  
  selectedItemsContainer.empty();
  var appendData = '';
  
  $.each(items, function(i, item)
    {
      if ($(item).prop('checked'))
        {
          appendData +=$(item).val() + ' ';
        }
    });
  
    selectedItemsContainer.append(appendData);
            
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="items" value="Data 1">Data 1
<input type="checkbox" name="items" value="Data 2">Data 2
<input type="checkbox" name="items" value="Data 3">Data 3
<br>
<div id="selected"></div>

【讨论】：