Прослушайте проверенный input = "checkbox" и разделите равные проценты для событий input = "text" Javascript Jquery - PullRequest
Новая
       19

Прослушайте проверенный input = "checkbox" и разделите равные проценты для событий input = "text" Javascript Jquery

0 голосов
/ 04 июля 2018

Вот этот код, который я пытаюсь выяснить, есть четыре случая: enter image description here Когда я выбираю первый флажок, он появляется на 100% справа от него. Когда установлен второй флажок, он появляется на 50% для каждого из входов. Когда установлен третий флажок, он делится на 33% для каждого входа. И так же для всех выбранных флажков, 25% каждый.

Кроме того, когда я отменяю выбор, он возвращается. Он делит процентное соотношение между количеством выбранных флажков.

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 04 июля 2018

Взгляните сюда: 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;
}
...