Question

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

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

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

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

Answer 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的

＆＃13;

$('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
  }
});

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

jquery：如果未选中复选框，则删除所选值

2 个答案: