javascript - jquery:如果未选中复选框，则删除所选值

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

$('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>