javascript - check and uncheck in js

Question

Problem description: There are multiple checkboxes, implemented using input simulation. I want to put the corresponding value into the array when clicked, and delete the corresponding value in the array when unchecked. How to achieve this?

阿神 · Answer

I have done something similar before. The general idea is: loop checkbox, when the current checkbox is checked, set the current checked status and then take the input value and pass it into the array array.push($(this).val()), Unchecking is the same operation. In the end, just remove the input value.

我想大声告诉你 · Answer

<pre class='brush:php;toolbar:false;'><code><p class="parent">
    <input index='0' type="checkbox">
    <input index='1' type="checkbox">
    <input index='2' type="checkbox">
  </p>
  <script>
  //存储数据
  var arrValue = [];

//有一个父级包住所有的input['checkbox']
  document.querySelector('.parent').addEventListener('change', function(event) {
    var tar = event.target;
    if (tar.getAttribute('type') === 'checkbox') {
      //如果改变的是checkbox
      var index = tar.getAttribute('index'),
          onoff = true,//判断有没有存在的值
          data = {
              index:index,
              value:tar.value
          }

arrValue.forEach(function(v,i,arr){
          if(v.index === index){
              //获取到目标
              arr.splice(i,1);
              onoff = false;
              return;
          }
      })

if(onoff){
          //如果没有存在的，就添加
          arrValue.push(data);
      }

}
  }, false);
  </script>

`</code></pre>

为情所困 · Answer

Change your thinking, write a checkbox change event, and get all selected items (checked=true), that’s it

淡淡烟草味 · Answer

I was bored and wrote something for a while, and copied @shangguanyuanheng's code. I don't understand why I don't need to use native jquery, and the title doesn't say it can't be used, right?

code:

Online trial

Hope to make bricks~