html复选框

之所以想到复选框是因为在上周的工作中看到同事的代码让我大开眼界，我是真没有想到一个最基本，最简单的页面元素都能写的这样抽象难用

最简单的实现方法去百度搜html复选框，这是对自己盲写不自信的童鞋，或者去w3，菜鸟，要是这样都搞不定，那我也不知道咋弄了

//dom部分
<input type="checkbox" value="0" checked>候选项1
<input type="checkbox" value="1">候选项2
<input type="checkbox" value="2">候选项3

//逻辑部分
<script>
    
    //把第一个复选框设置未false，使用了jquery的索引
    $('input[type=checkbox]').eq(0).prop('checked', false)
    
    //所有都置为true，注意这里不能用attr，只能用prop
    $('input[type=checkbox]').prop('checked', true)

    //查询哪些被选中
    $('input[type=checkbox]').filter(':checked')

    //如果不用伪类就用循环，注意类数组不能用forEach
    function getValue(){
          const cbs =  $('input[type=checkbox]').toArray();
          let value = '';
          for(let i=0; i<cbs.length; i++){

              if($(cbs[i]).prop('checked')){
                  value += $(cbs[i]).val() + ','
              }
           }
           return value;
    }
  
</script>

那如果我不想用原生的复选框咋办，两个办法，覆盖浏览器复选框的样式，这是我强烈不推荐的，第二种就是用img或者label的background，而后者就是我同事写的东西，如果非要用label去做视觉必然要隐藏input元素，这就直接导致调试的时候你点击的是label但是响应的是input，如果不仔细看样式表，完全不知道写了个啥

//这里的图片路径是假的，checked代表选中，defalut代表未选中
<img src='./checked.png' c-value='0' check='1'>默认选项1
<img src='./default.png' c-value='1' check='0'>默认选项2
<img src='./default.png' c-value='2' check='0'>默认选项3

<script>
    //把第一个复选框设置未false，如果觉得不够优雅可以不设置check属性
    $('img').eq(0).attr('src', './default.png').attr('check', '0')
    
    //所有都置为true，注意这里不能用attr，只能用prop
    $('img').attr('src', './checked.png').attr('check', '1')

    //使用属性选择器找出哪些被选中
    $('img[src="./checked.png"]')

    function getValue(){
          const cbs =  $('img').toArray();
          let value = '';
          for(let i=0; i<cbs.length; i++){

              if($(cbs[i]).attr('check') == '1'){
                  value += $(cbs[i]).attr('c-value') + ','
              }
          }
          return value;
    }
</script>

 如果有写错的地方，请各位多批评指正，如果有更好的想法也请提出来