倾听检查过的输入="；复选框“；并将输入的百分比等分为“；“文本”；Javascript Jquery事件

我正试图找出这段代码，有四个实例： 当我选中第一个复选框时，它100%显示在右边的框中。 选中第二个复选框时，它在每个输入上显示50%。 选中第三个复选框时，它将平均拆分为每个输入的33%。 所有选中的复选框也是如此，每个复选框占25%

另外，当我取消选择一个时，它会返回。它在所选复选框的数量之间平均分割百分比

感谢您的帮助

看看这里：

我已经使用Vue.js来快速建模这将如何工作，但是，在没有Vue的情况下也可以应用相同的概念，基本上是完全相同的方式

JavaScript

new Vue({
  el: '#app',
  data: {
    percentage: 0,
    numberOfChecked: 0
  },
  methods: {
    update(event) {
      if (event.target.checked)
        this.numberOfChecked += 1
      else
        this.numberOfChecked -= 1

      if (this.numberOfChecked === 0)
        this.percentage = 0
      else
        this.percentage = 100 / this.numberOfChecked
    }
  }
})

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <template v-for='id in 4'>
    <input type='checkbox' v-bind:id='id' v-on:click='update' />
    <label v-bind:for='id'> {{ percentage === 0 ? '' : percentage + '%' }} </label>
  </template>
</div>

---

到目前为止你的代码是什么？

input:not(:checked) + label {
  color: white;
  user-select: none;
}