Unable to get checkbox value

#1

Hi I am unable to get the value of a checkbox inside of my wire model.

Are you using the latest version of Livewire: Yes

Do you have any screenshots or code examples:
checkbox.blade.php

<div>
    <div>
        @foreach($options as $option)
            <div>
                <label class="inline-flex items-center">
                    <input wire:model="values.{{ $loop->index }}" value="{{ $loop->index }}" name="checkbox-test" type="checkbox" class="form-checkbox">
                    <span class="ml-2">Index {{ $loop->index }}</span>
                </label>
            </div>
        @endforeach
    </div>
   @forelse($values as $value)
        {{ $value }}
    @empty
        Nothing to show
    @endforelse
</div>

Checkbox.php

<?php

namespace App\Http\Livewire\Elements;

use Livewire\Component;

class Checkbox extends Component
{
    public $values;
    public $options;

    public function mount($options)
    {
        $this->options = $options;
    }

    public function render()
    {
        return view('livewire.elements.checkbox');
    }
}
#2

try declaring values as an array in your public properties?

    public $values = [];
    public $options;
#3

Thanks for the reply, That still doesn’t return the value of the checkbox, only the number 1, not the option value, which is what I was hoping to retrieve.

#4

Have you tried something like this:

<div>
  <div>
    @foreach($options as $key => $value)
    <div>
      <label class="inline-flex items-center">
        <input wire:model="values.{{ $key }}" type="checkbox" class="form-checkbox">
        <span class="ml-2">Index {{ $loop->index }} - {{ $value }}</span>
      </label>
    </div>
    @endforeach
  </div>
  <b>Raw:</b>
  <pre>{{ var_dump($values) }}</pre>
  <b>Cleaned:</b>
  <pre>{{ var_dump(array_keys(array_filter($values))) }}</pre>
</div>

$values is an array you can use:

$result = array_keys(array_filter($values));
#5

I would start with valid form elements. You cannot have checkboxes created in a loop, all with the same name.

Are you getting an array in the component? You say you get the number 1. Is that 1 for every option?

#6

That’s not true, the name only matters if it was a form being submitted traditionally. Data binding here, it doesn’t even matter if it has a name or not. @Erik’s answer finishing out with array_keys(array_filter($values)) will give a list of the option names that are selected by putting the key into the binding.

@kaptk2, I would just add it might make life a little easier to create a computed property depending on how you are using the selected options. Something like:

public function getSelectedOptionsProperty()
{
    return array_keys(array_filter($this->values));
}

Then you’re down to one spot in your code to alter it for how you need to use it, and it can be referenced anywhere $this->selectedOptions.

#7

I don’t know if this helps you, but this seemed a simpler option to me. The result is an array that reflects the checked/unchecked state of the checkboxes.

Component

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Checkboxes extends Component
{
    public $options=[];

    public function mount($options)
    {
        $this->options = $options;
    }

    public function render()
    {
        return view('livewire.checkboxes');
    }
}

View:

<div>
    <div class="mb-4">
        @foreach($options as $key=>$option)
        <div>
            <label class="inline-flex items-center">
                <input wire:model="options.{{ $key }}" value="1" type="checkbox">
                <span class="ml-2">{{ $key }}</span>
            </label>
        </div>
        @endforeach
    </div>

    @foreach($options as $key=>$option)
        {{$key }}: {{($option) ? 'true' : 'false' }}<br />
    @endforeach

</div>

Then call the component in the main layout, passing in an array of options with their existing states.

    @livewire('checkboxes',['one'=>true,'two'=>false,'three'=>false])
#8

Thanks everybody you got me going down the correct path. Here is what I ended up doing:

@foreach($options as $option)
    <div>
      <label class="inline-flex items-center">
        <input wire:model="values.{{ $loop->index }}" type="checkbox" class="form-checkbox">
        <span class="ml-2">Index {{ $loop->index }} - {{ $option }}</span>
      </label>
    </div>
    @endforeach
  <b>Raw:</b>
  <pre>{{ var_dump($values) }}</pre>
  <b>Cleaned:</b>
  <pre>{{ $options->intersectByKeys($values) }}</pre>

That gets me a collection of selected values. I’ll clean it up further by adding a computed property.

#9

<input wire:model="options" name='values[]' type="checkbox" class="form-checkbox">
Just making the name field an array should fix everything!