Relation between targets

I am just starting with Stimulus.
I have a form, where you can enter an amount and then this amount should be distributed between some options if the corresponding checkbox is checked.

for example I enter 30 and check both options, each option gets 15.

I have the following code where I managed to calculate the distributed amount.
But how can I now find the input field next to the checkbox.
In other words how can I connect the checkbox with the distribution.split input field ?

<!doctype html>
    <meta charset="utf-8">
    <script src=""></script>
      (() => {
        const application = Stimulus.Application.start()

        application.register("distribution", class extends Stimulus.Controller {
          static get targets() {
            return [ "active", "split", "amount" ]
          calcsplit() {
            var count = this.activeTargets.filter(function(el) {
              return el.checked

            var distributedAmount = this.amountTarget.value / count
          // …
    <div data-controller="distribution">
        <input data-target="distribution.amount" type="number" data-action="distribution#calcsplit">

          <input type="checkbox" data-target="" data-action="distribution#calcsplit">
          Option 1
        <input type="text" data-target="distribution.split">
          <input type="checkbox" data-target="" data-action="distribution#calcsplit">
          Option 2
        <input type="text" data-target="distribution.split">


If they always come in pairs, you could index into one of the target arrays, and use the iterator to determine if a text field should be populated with a share of the entered amount:

for (let i = 0; this.activeTargets.length; i++) {
  if (this.activeTargets[i].checked) {
    this.splitTargets[i].value = distributedAmount;    

I’ve made the updated example available here:


Yes, they always come in pairs. So your solution is perfect.
Many thanks!

1 Like