在Alpine Js中基于单选框显示/隐藏Div Sections

Question

这里我附加的Jquery代码工作完美。但我需要这个代码在ALpine js。如果我选择单选复选，我们需要根据复选框

显示div内容。

$(document).ready(function() {
$("div.desc").hide();
$("input[name$='Victim']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();


<h3> Who was involved in this incident? </h3>
<p><label><input name="Victim" type="radio" value="Guest" required >Guest </label></p>
<div id="Guest" class="desc">
<p><strong>Guest</strong> questions here ...</p>
</div>
<p><label><input name="Victim" type="radio" value="Employee" > Employee </label</p>
<div id="Employee" class="desc">
<p><strong>Employee</strong> questions here ...</p>
</div>

<p><label><input name="Victim" type="radio" value="Vendor" > Vendor</label></p>
<div id="Vendor" class="desc">
<p><strong>Vendor</strong> questions here ...</p>
</div>

Answer 1

这很简单，只需定义一个变量:victim，通过x-model在无线电输入上使用它，然后使用x-show根据选择显示/隐藏内容。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{victim: 'Guest'}">
<h3> Who was involved in this incident? </h3>
<p><label><input name="Victim" type="radio" value="Guest" x-model="victim">Guest </label></p>
<div id="Guest" class="desc" x-show="victim == $el.id">
<p><strong>Guest</strong> questions here ...</p>
</div>

<p><label><input name="Victim" type="radio" value="Employee"  x-model="victim">Employee </label</p>
<div id="Employee" class="desc" x-show="victim == $el.id">
<p><strong>Employee</strong> questions here ...</p>
</div>

<p><label><input name="Victim" type="radio" value="Vendor"  x-model="victim">Vendor</label></p>
<div id="Vendor" class="desc" x-show="victim == $el.id">
<p><strong>Vendor</strong> questions here ...</p>
</div>

</div>