JavaScript数组元素的添加和删除操作

Question

实现场景：页面有多个类型如：

                   <input type="checkout" value=1"/>a
                   <input type="checkout" value=2"/>b
                   <input type="checkout" value=3"/>c
                   <input type="checkout" value=4"/>d
                   ...

默认会勾选a,b两个类型（数组中存着1，2），用户可以更改类型，如何实现点击input，来选取新的值存着数组中，可以删除默认值，选取新的值，其中可能也包括默认值

Answer 1

为所有input绑定一个click事件，判断数组内是否存在当前input的value如果有就remove从数组内删除，如果没有就push添加到数组中

Answer 2

<form action="#">
  <p>
    <input type="checkbox" class="checkbox" id="test5" value="1" />
    <label for="test5">红色</label>
  </p>
  <p>
    <input type="checkbox" class="checkbox" id="test6" value="2" />
    <label for="test6">黄色</label>
  </p>
  <p>
    <input type="checkbox" class="checkbox" id="filled-in-box" value="3" />
    <label for="filled-in-box">填充</label>
  </p>
  <p>
    <input type="checkbox" class="checkbox" id="indeterminate-checkbox" value="4" />
    <label for="indeterminate-checkbox">模糊样式</label>
  </p>
</form>

var map = {};
$('form').on('change', '.checkbox', function (e) {
  var $this = $(this);
  if($this.prop('checked')){
    map[$this.val()]=$this.val();
  }else{
    map[$this.val()]=null;
  }
  console.log(mapToArray(map).join());
});
function mapToArray(obj) {
  var array = [];
  for (var key in obj){
    if(obj[key]){
      array.push(key);
    }
  }
  return array;
}

我把选中的值放在了obj中,如果要获取当前选中的值有哪些,调用mapToArray方法就行.
如果有默认值,要把默认值添加到map中
https://jsbin.com/fidomipiqi/...