如何根据复选框状态使用 Livewire 或 AlpineJs 切换文本

Question

我想做的是：

复选框被选中时 ---> 将文本值更改为“是”并将其值存储到组件变量
未选中复选框时 ---> 将文本值更改为“否”并将其值存储到组件变量

下面是我例外的例子，但这个例子使用 Javascript。我想使用 livewire or/and alpinejs.

实现相同的行为

function myFunction() {
  var checkBox = document.getElementById("toogleA");
  var text = document.getElementById("text");
  if (checkBox.checked == true) {
    document.getElementById("text").innerHTML = "YES";
  } else {
    document.getElementById("text").innerHTML = "NO";
  }
}

/* Toggle A */

input:checked~.dot {
  transform: translateX(100%);
  background-color: #7456e3;
}


/* Toggle B */

input:checked~.dot {
  transform: translateX(100%);
  background-color: #7456e3;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />



<!--Start toggle button-->
<div class="flex items-center justify-center w-auto mb-5">
  <!-- label -->
  <label for="toogleA" class="flex items-center cursor-pointer">
                    <!-- toggle -->
                    <div class="relative">
                        <!-- input -->
                        <input wire:model="person" id="toogleA" onclick="myFunction()" type="checkbox" name="test" value="person" class="sr-only" />
                        <!-- line -->
                        <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
                        <!-- dot -->
                        <div class="absolute w-6 h-6 transition bg-white rounded-full shadow dot -left-1 -top-1"></div>
                    </div>
                    
                <div id="text" class="ml-3 font-medium text-gray-700">NON </div>

            </div>

        </div>

Answer 1

您只需使用 Livewire 即可实现。

组件

class YourComponent extends Component
{
    public bool $toggleA = false;

    public function render()
    {
        return view('livewire.your-component');
    }
}

组件视图

<label for="toggleA">Toggle</label>
<input wire:click="$toggle('toggleA')" type="checkbox" id="toggleA" />

<p>{{ $toggleA ? 'Yes' : 'No' }}</p>

$toggle 函数是 Livewire 中的一个特殊助手，专门用于切换 boolean 属性的值。

如何根据复选框状态使用 Livewire 或 AlpineJs 切换文本

How to Toggle text using Livewire or AlpineJs when according to checkbox status

laravel-livewire

alpine.js