javascript - 取消选择下拉项时从数组中删除元素

Question

我有一个当用户在下拉列表中选择一个元素时运行的脚本:

<script type="text/javascript">
    var seSelection = [];

    $(document).ready(function() {
        $(".dropdown-menu input").click(function() {
            var value = $(this).val();
            $(this).closest("#seButton").data();

            if (this.checked) {
                seSelection.push(this.value);
            }          
        });

        console.log("se equals " + seSelection);
    });
</script>

<button id ="seButton" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
    Options<span class="caret"></span>
</button>

<ul class="dropdown-menu noclose">
    <li>
        <input type="checkbox" id="ex3_1" name="ex3" value="A" checked="">
        <label for="ex3_1">Option 1</label>
    </li>
    <li>
        <input type="checkbox" id="ex3_2" name="ex3" value="B">
        <label for="ex3_2">Option 2</label>
    </li>
    <li>
        <input type="checkbox" id="ex3_3" name="ex3" value="C">
        <label for="ex3_3">Option 3</label>
    </li>
</ul>

我使用的是 Twitter Bootstrap noclose，因此 dropdown-menu 保持打开状态，直到我点击退出。这样做的目的是允许用户选择多个选项。因此，当我选择各种选项时，我的控制台如下所示，因为每次单击都会触发脚本:

se 等于
se 等于 A
se 等于 A,B
se 等于 A、B、C

这很棒 - 并且它运行正常，但在同一个下拉列表中，如果我在选择 C ​​后取消选择它，它不会将 c 作为数组 中的值删除seSelection.

我不知道如何编写与上面的脚本代码相反的代码，因为我找不到任何 unclick(function) 或 unpush(this. value) 存在于 jQuery 中。

这个怎么写？

Answer 1

取消选中后，您可以像这样从数组中删除该项目 http://jsfiddle.net/93zL0ae9/

<script type="text/javascript">
var seSelection = [];
$(document).ready(function(){
  $(".dropdown-menu input").click(function() {
    var value = $(this).val();
        $(this).closest("#seButton").data();
        if (this.checked) {
           seSelection.push(this.value);
        }
        else
        {
           var index = seSelection.indexOf(this.value);
           if(index>=0)
           {
              seSelection.splice(index,1);
           }
        } 
    console.log("se equals " + seSelection);         
  });

});
</script>


<button id ="seButton" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Options<span class="caret"></span></button>
  <ul class="dropdown-menu noclose">
    <li>
      <input type="checkbox" id="ex3_1" name="ex3" value="A" checked="">
      <label for="ex3_1">Option 1</label>
    </li>
    <li>
      <input type="checkbox" id="ex3_2" name="ex3" value="B">
      <label for="ex3_2">Option 2</label>
    </li>
    <li>
      <input type="checkbox" id="ex3_3" name="ex3" value="C">
      <label for="ex3_3">Option 3</label>
    </li>
  </ul>
</div>