收听已检查的 input="checkbox" 并为 input="text" Javascript Jquery 事件拆分等百分比

Question

我正在尝试找出这段代码，有四种情况：当我 select 第一个复选框时，它从右边 100% 显示在框上。当第二个复选框被 selected 时，它在每个输入上显示 50%。当第三个复选框被 selected 时，它会为每个输入平均分配 33%。所有 selected 复选框也是如此，每个复选框占 25%。

另外，当我 deselect 一个时，它又回来了。它在 selected 复选框的数量之间平分百分比。

感谢任何帮助！

Answer 1

看这里：https://jsfiddle.net/rjq0eb3y/20/

我已经使用 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>

CSS

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

收听已检查的 input="checkbox" 并为 input="text" Javascript Jquery 事件拆分等百分比

Listen to checked input="checkbox" and split equal percent for input="text" Javascript Jquery events

javascript

jquery

events

event-handling

jquery-events