如何在选择复选框、单选按钮等时执行事件

问题描述

我试图在选择复选框或单选按钮时显示一个 div。我没有使用点击功能或任何复杂的东西。谁能在我的代码中找到我的问题？解决起来应该是轻而易举的。谢谢！

$(() => {
  if ($("input#checkBox").is(':checked')) {
    $('#add-a-car').show();
    // Code in the case checkBox is checked.
  } else {
    $('#add-a-car').hide();
    // Code in the case checkBox is NOT checked.
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="add-a-car">Add-a-Car</label>
<input type="checkBox" name="checkBox" id="checkBox">
<div id="add-a-car">
  <label for="add-a-car">Pick your date</label>
  <input type="text" value="pick-a-date">
</div>

解决方法

要执行您需要的操作，您需要使用事件处理程序。在这种情况下，change 事件会在无线电的 checked 状态更改时触发。另请注意，您可以使用 toggle() 方法稍微简化逻辑。

jQuery($ => {
  $('#checkbox').on('change',e => {
    $('#add-a-car').toggle(this.checked);
  });
});

#add-a-car { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="add-a-car">Add-a-Car</label>
<input type="checkbox" name="checkbox" id="checkbox">
<div id="add-a-car">
  <label for="add-a-car">Pick your date</label>
  <input type="text" value="pick-a-date">
</div>